下面是一个示例代码,演示了如何在Angular 9中实现多行动态表单验证:
首先,我们需要创建一个Angular组件来处理动态表单。在这个组件中,我们将定义一个表单数组,并为每个表单输入字段定义验证规则。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
form: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.form = this.formBuilder.group({
rows: this.formBuilder.array([])
});
}
get rows() {
return this.form.get('rows') as FormArray;
}
addRow() {
const row = this.formBuilder.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
});
this.rows.push(row);
}
removeRow(index: number) {
this.rows.removeAt(index);
}
onSubmit() {
if (this.form.invalid) {
return;
}
// 处理表单提交逻辑
}
}
接下来,我们需要在组件的模板文件中定义动态表单的HTML结构,并使用Angular的表单指令来处理验证和双向绑定。
在这个示例中,我们使用了一个formArrayName
指令来绑定表单数组,并在*ngFor
循环中使用formGroupName
指令来绑定每个表单行。
在每个表单输入字段中,我们使用了formControlName
指令来绑定表单控件,并定义了一些验证规则(例如required
和email
)。
最后,在表单的提交处理程序中,我们检查表单的有效性,如果表单无效,则不执行任何操作。否则,您可以处理表单提交的逻辑。
希望这个示例能帮助您解决Angular 9中多行动态表单验证的问题!