这里是一个验证表单数组的简单示例。以下是 app.component.ts 文件:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, FormArray } from '@angular/forms';
import { CustomValidator } from './custom-validators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [`./app.component.css`]
})
export class AppComponent implements OnInit {
person: FormGroup;
carsArray: FormArray;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.person = this.fb.group({
firstName: this.fb.control('Joe'),
lastName: this.fb.control('Dirt'),
cars: this.fb.array([
this.fb.group({
make: this.fb.control('a'),
model: this.fb.control('b'),
year: this.fb.control(1990)
}, {
validator: CustomValidator.checkYearModel()
})
])
});
this.carsArray = this.person.get('cars') as FormArray;
}
}
表单数组中的表单组可以使用第二个对象参数,其键名为validator,您可以在其中放置自定义验证器。以下是 custom-validator.ts
的内容:
export class CustomValidator {
static checkYearModel() {
return (control) => {
const year = control.value.year;
const model = control.value.model;
let valid: boolean;
(year < 1990 && model !== 'mustang') ? valid = false : valid = true;
return (valid) ? null : { checkYearModel: true };
};
}
}
在这种情况下,我创建了变量,使其等于控件的年份和型号值(即您将验证放置在其中的表单组)。如果年份在1990年之前,那么模型必须是“野马”才能有效。如果valid变量为true(这意味着控件将是有效的),则此方法返回null;否则,它将返回一个具有值为true的对象键(这将使控件无效)。希望这可以帮到您!