角が4の親コンポーネントからフォームが有効であることを確認します。

Question

親コンポーネントの子コンポーネントに配置されたフォームの有効性をチェックしようとしています。最善のシナリオは、フォームが無効な場合は親コンポーネントのボタンを無効にするか、フォームが無効な場合は親ボタンから警告をトリガーする悪いシナリオでボタンを無効にすることです。

私は、フォームが次のように子コンポーネントの機能を呼び出すために@ViewChildデコレータを使用して、親から「NG-無効」クラスを持っているかどうかを確認するために達成できる：

親コンポーネント：

export class CandidateVerificationComponent implements OnChanges, OnInit { 

@ViewChild(RightPanelComponent) rightPanelPointer: RightPanelComponent; 

saveAndFinish() { 

    if (this.rightPanelPointer.checkFormValidity()) 
    { 
     alert('No Valid'); 
     return; 
    } 

    this.rightPanelPointer.onSubmit(); 

    }  
} 

を

子コンポーネント：

export class RightPanelComponent implements OnChanges , OnInit{ 

@ViewChild("candiateForm", { read: ElementRef }) tref: ElementRef; 

    checkFormValidity():boolean {   
    return (this.tref.nativeElement.className.indexOf('ng-invalid') !== -1); 
    } 
} 

それは最悪のシナリオのために動作しますが、私はDOMにコンポーネントをリンクする考えを好きではない、私は賢くアイデアというだろう。

テンプレート参照変数（#candiateForm）を使用したいとします。たとえば、親からの妥当性をチェックするためにフォーム（子）から送信ボタン（以下を参照）の有効性をチェックすることができます。親からそのテンプレート変数にアクセスすることは可能ですか？

<form (ngSubmit)="onSubmit()" #candiateForm="ngForm" name="candiateForm" (change)="formChanged()"> 
    <div class="form-group"> 
     <label class="control-label" for="firstName">First name:</label>       
     <input type="text" class="form-control" id="firstName" pattern="^[^0-9]+$" required [(ngModel)]='candidate.firstName' name="firstName" #firstName="ngModel"> 
    </div> 
<button type="submit" class="btn btn-default" [disabled]="!candiateForm.form.valid">Submit</button> 
</form> 

Answer 1

角度が暗黙のうちにすべてのform要素にngFormを適用すると、コンポーネント/ディレクティブクラス参照によってコンポーネントテンプレート内の任意のコンポーネント/ディレクティブを参照することができ、あなたがElementRefを読み取るために、テンプレートを必要としない持っていないので、 #candiateFormを参照するには、ディレクティブクラス参照ngFormによって直接フォームにアクセスすることができます

export class RightPanelComponent implements OnChanges , OnInit{ 
    @ViewChild(NgForm) form; 

    checkFormValidity():boolean {   
     return this.form.valid; 
    } 

をし、また、あなたは親コンポーネントから直接フォームにアクセスすることができます

export class CandidateVerificationComponent implements OnChanges, OnInit { 
    @ViewChild(RightPanelComponent) rightPanelPointer: RightPanelComponent; 

    saveAndFinish() { 
     if (this.rightPanelPointer.form.valid)