在 Angular 中,可以使用自定义验证器来验证 FormArray。如果自定义验证器没有触发,可能是由于以下原因:
下面是一个解决方法的代码示例:
首先,创建一个自定义验证器函数,它接受一个 FormArray 控件作为参数,并返回一个验证结果对象:
function customValidator(formArray: FormArray) {
// 验证逻辑
if (/* 验证失败 */) {
return { customError: true };
}
return null;
}
然后,在组件中创建一个 FormArray 控件,并将自定义验证器添加到该控件中:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
myArray: this.fb.array([], customValidator) // 将自定义验证器添加到 FormArray 控件中
});
}
ngOnInit() {}
// 添加一个表单控件到 FormArray 中
addControl() {
const myArray = this.myForm.get('myArray') as FormArray;
myArray.push(this.fb.control(''));
}
// 获取 FormArray 控件
get myArray() {
return this.myForm.get('myArray') as FormArray;
}
}
最后,在模板中使用 FormArray 控件和自定义验证器:
在以上代码中,当自定义验证器返回验证结果时,表单控件会自动更新并显示错误消息。