角度2：親コンポーネントから子コンポーネントのフォームフィールドを検証

Question

問題の声明：は

もいくつか<input>タグを持つ<form>タグとその内側の一部<input>タグ、子コンポーネントを持つ親コンポーネントは、親コンポーネントが1 <submit>を持っていますフォームの送信時にフォームフィールドを検証しています。

子コンポーネントを検証する方法<input>親コンポーネントのフィールドはsubmitのフォームですか？

要件：親コンポーネントは、そのテンプレートでinputコンポーネントと子コンポーネントを含むフォームを持っている場合

は、その後、これらのinputのコンポーネントは、親コンポーネントから送信する場合、クリックに検証する必要があります。

調査結果：

あり、ポストの多くは、SO同じ問題文を持っているが、以下の記事は、フォーム全体を検証する任意の適切なsolution.Allを見つけることができませんでしたが、私の要件は、子コンポーネントの各フィールドを検証することです。

• Angular 2 validation together with the child component
• Allow template-driven form inputs across a component hierarchy to register with a single parent form
• How to check the validity of the child component form within the parent component in Angular 4

Answer 1

我々としてもtemplate driven技術を使用してそれを達成することができます。ステップの下に検索：

• 親コンポーネントから、我々は、ボタンイベントを提出渡す必要があり、子コンポーネントに。

  <button type="button" (click)="enterForm(parentForm)">Submit</button> 
  

  ここで、parentFormはフォームリファレンスです。

• 親からの@ViewChildデコレータを使用して子コンポーネントメソッドを呼び出すと、submit button eventがサブミットのクリックに渡されます。

  @ViewChild('validateChildComponentForm') private ChildComponent: ChildComponent; 
  

• @ViewChildデコレータを使用して子フォームの参照を子コンポーネントに渡します。

  @ViewChild('smartyStreetForm') form; 
  
  enterForm(parentForm) { 
      this.submitted = true; 
      this.ChildComponent.validateChildForm(this.submitted); 
      if(!parentForm.valid || !this.childFormValidCheck) { 
       return; 
      } else { 
       // success code comes here. 
      }     
  } 
  

• 今の子コンポーネント方法で、私たちは、親フォームを送信し、子コンポーネントフォームが有効であるならば、親コンポーネントにそうでない場合はfalse真発することを確認します。 @Output decoratorを使用してisChildFormValid値を親コンポーネントに送出します。

  @Output() isChildFormValid: EventEmitter<any> = new EventEmitter<any>(); 
  
  public validateChildForm(data: any) { 
      if (data === true) { 
       if(this.form.valid === true) { 
        this.isChildFormValid.emit(true); 
       } else { 
        this.isChildFormValid.emit(false); 
       } 
      } 
  } 
  

• 親コンポーネントでは、isChildFormValid値が取得されます。

  private isChildFormValid(formValid: any) { 
      this.childFormValidCheck = formValid; 
  } 
  

絵図：