角度4の配列の検証

Question

私は反応形式のformArrayの検証に助けが必要です。私はアレイの各項目を検証したいが、どうすればいいのかわからない。ありがとう。

htmlコード：

<label for="name">name:</label> 
    <input formControlName="name" id="name" type="text"> 
    <div *ngIf="name.invalid && (name.dirty || name.touched)"> 
     <div *ngIf="name.errors.required"> 
     required 
     </div> 
    </div> 

typescriptですコード：それはありません

initItemRows() { 
    return this.fb.group({ 
     name: ['', Validators.required ], 
     info: ['', Validators.required ] 
    }); 
    } 

：

createForm() { 
    this.form = this.fb.group({ 
     person: this.fb.array([this.initItemRows()]) 
    }); 
    } 

initItemRows() { 
    return this.fb.group({ 
     name: [''], 
     info: [''] 
    }); 
    } 

    addNewRow() { 
    const control = <FormArray>this.form.controls['person']; 
    control.push(this.initItemRows()); 
    } 

    deleteRow(index: number) { 
    const control = <FormArray>this.form.controls['person']; 
    control.removeAt(index); 
    } 

    get name() { return this.form.get('person.name'); } 
    get info() { return this.form.get('person.info'); } 

私はこれを試してみましたNT仕事..

Answer 1

あなたのゲッターをnameとinfoのために、実際に特定のフォームコントロールを対象としていない、あなたのpersonであるためformArrayは、たとえばthis.form.get('person.name');のためにあなたの形で存在しません。

<div *ngFor="let p of form.controls.person.controls; let i = index" 
      [formGroupName]="i"> 
    <label for="name">name:</label> 
    <input formControlName="name" id="name" type="text"> 
    <!-- check if the name in this group has the error --> 
    <div *ngIf="p.controls.name.dirty"> 
    <div *ngIf="p.hasError('required', 'name')">Required</div> 
    </div> 
</div> 

DEMO

---

をさらに：何をする必要がある、あなたのテンプレートは次のようになりますので、そのコントロールを持つグループ、各formgroupとターゲットのための反復を使用していますあなたのコードを少し短くして、formgroupを配列に初期化/追加するのに本当に必要でないメソッドを削除することができるので、addNewRowを削除しました。新しい行が必要なときにinitItemRowsを呼び出すことができます追加されました。

this.form = this.fb.group({ 
    person: this.fb.array([]) 
}); 
this.initItemRows(); 

initItemRows() { 
    let ctrl = <FormArray>this.form.controls.person; 
    ctrl.push(this.fb.group({ 
    name: ['', Validators.required], 
    info: ['', Validators.required]  
    })) 
}