我需要有关 react 形式的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 ]
});
}
它不起作用..
最佳答案
您的name
和info
的 getter 实际上并不针对特定的表单控件,因为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
还有一个建议是,您可以稍微缩短代码长度,并删除在向数组初始化/添加表单组时实际上并不需要的方法,因此在这里,我删除了
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]
}))
}