検証を伴うAngular2テンプレート駆動のサブフォームコンポーネント

Question

私はngForに含まれる入力グループを含むテンプレート駆動フォームを持っています。

私は自身の子コンポーネントに繰り返される 'サブグループ'を分離しようとしていますが、子コンポーネントに含まれている検証を親に持つことに問題があります。ngForm

親テンプレート：

<form #parentForm="ngForm"> 
    <input name="firstName" ngModel required> 
    <input name="lastName" ngModel required> 

    <child-component *ngFor="let child of children;"></child-component> 
</form> 

子テンプレート：

<div> 
    <input name="foo" required ngModel> 
    <input name="bar" required ngModel> 
</div> 

私が持っていることはできませんよ。ここ

は、私が何を言っているかの簡易版であります親フォームは子入力のrequiredでピックアップします。

this.parentForm.addFormGroup(this.childForm.form)

しかし、これはまだ動作しません：私は、独自のフォーム内の子供を持つと子供に通過#parentFormインスタンスを渡し、子の呼び出しを持つ試してみました。

親は子フォームのContentChildrenを取得し、それぞれフォームに追加しますが、それでも検証は機能しません。

サブコンポーネントにControlValueAccessorを実装させることができますが、実際には検証が行われていないため、カスタムバリデータを実装する必要があります。requiredです。

なぜ私は親にサブフォームを追加できず、子の検証を使用できないのか理解してください。

Answer 1

一つの可能​​な解決策は、子コンポーネントから親フォームのほかのコントロールのようになります。

child.component.ts

@Component({ 
    selector: 'child-component', 
    template: ` 
    <div> 
    <input name="foo" required ngModel> 
    <input name="bar" required ngModel> 
    </div> 
    ` 
}) 
export class ChildComponent { 
    @ViewChildren(NgModel) controls: QueryList<NgModel>; 

    constructor(private parentForm: NgForm) { } 

    ngAfterViewInit() { 
    this.controls.forEach((control: NgModel) => { 
     this.parentForm.addControl(control); 
    }); 
    } 
} 

Plunker Example

Answer 2

あなたは

@Input() children:any[]=[]; 

は、テンプレートを変更して入力変数を宣言し、あなたの

1. で

   <form #parentForm="ngForm"> 
       <input name="firstName" ngModel required> 
       <input name="lastName" ngModel required> 
   
       <child-component #parentForm.childForm="ngForm" [children]="children"></child-component> 
   </form> 
   

   ように見えたあなたの問題のために結合し、@Inputプロパティを使用することができます以下のようになります。

   次のように

   <div *ngFor="let child of children;"> 
       <input name="foo" required [(ngModel)]="child.foo"/> 
   </div>