我需要帮助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
and 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 https://stackblitz.com/edit/angular-mwxnzk?file=app%2Fapp.component.ts
此外,建议您可以稍微缩短代码并删除初始化/将表单组添加到数组时真正不需要的方法,因此在这里我删除了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]
}))
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)