在Angular中,使用响应式表单处理表单中的错误消息是非常常见的。但是,当我们需要在数组中使用表单控件时,出现错误消息可能会有些棘手。以下是一些关于如何解决此问题的代码示例:
在所需组件的HTML文件中,将数组「formArray」绑定到表单中:
在组件的TS文件中,创建表单及其控件并添加表单验证器:
import { Component } from '@angular/core';
import { FormGroup, FormArray, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-form-array',
templateUrl: './form-array.component.html'
})
export class FormArrayComponent {
formGroup: FormGroup;
constructor(private fb: FormBuilder) {
this.formGroup = this.fb.group({
formArray: this.fb.array([
this.fb.group({
name: ['', Validators.required]
})
])
});
}
get formArray() {
return this.formGroup.get('formArray') as FormArray;
}
addFormArray() {
const formGroup = this.fb.group({
name: ['', Validators.required]
});
this.formArray.push(formGroup);
}
removeFormArray(index: number) {
this.formArray.removeAt(index);
}
}
在这个例子中,我们将表单绑定到「formArray」,并对数组中的表单控件进行了验证。同样,我们创建了一个添加表单组的方法「addFormArray