在表单数组中,每个表单控件需要单独的验证器函数来验证相应的输入项。以下是一个示例代码,其中包含了一个表单数组控件和其中一个输入项的验证器函数。
HTML文件:
组件TS文件:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormControl, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
items: this.fb.array([this.createItem()])
});
}
createItem(): FormGroup {
return this.fb.group({
name: ['', Validators.required],
email: ['', Validators.email]
});
}
addItem(): void {
const items = this.myForm.get('items') as FormArray;
items.push(this.createItem());
}
removeItem(index: number): void {
const items = this.myForm.get('items') as FormArray;
items.removeAt(index);
}
validationMessage(index: number): string {
const item = this.myForm.get(`items.${index}`).value;
const name = item.name;
const email = item.email;
if (name && email) {
return '';
}
let message = '';
if (name) {
message += 'Please enter an email.';
} else if (email) {
message += 'Please enter a name.';
} else {
message += 'Please enter a name and an email.';
}
return message;
}
}
在上述示例代码中,表单数组中的每个表单控件都单独地定义了验证器函数validationMessage,用于验证相应的输入项是否符合要求。具体的验证规则可以按照实际需求进行修改。在 HTML 文件中,通过将表单数组控件和验证器函数绑定