角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> 

打字稿代码：

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'); } 

我尝试这样：

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

它确实NT工作..

Answer 1

你的干将为name和info实际上并不针对特定的表单控件，因为你person是formArray，例如this.form.get('person.name');不会在您的形式存在。你需要做的，是使用重复中的每个formgroup和目标该组与它的控制，所以你的模板应该是这样的：

<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到你的数组，所以在这里我删除了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]  
    })) 
}