在Angular中,可以使用响应式表单模块来实现表单组对象数组的绑定和验证。下面是一个示例代码来演示如何实现:
首先,我们需要导入相关的模块和类:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, 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) { }
ngOnInit() {
this.myForm = this.fb.group({
// 表单组对象数组
users: this.fb.array([])
});
}
// 获取表单组对象数组的控件
get users(): FormArray {
return this.myForm.get('users') as FormArray;
}
// 添加表单组对象
addUser() {
const userFormGroup = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
});
this.users.push(userFormGroup);
}
// 移除表单组对象
removeUser(index: number) {
this.users.removeAt(index);
}
// 提交表单
submitForm() {
if (this.myForm.valid) {
console.log(this.myForm.value);
}
}
}
接下来,在模板文件中,使用ngFor指令来循环显示表单组对象数组的控件,并绑定相关的校验规则:
以上代码展示了一个简单的示例,其中通过调用addUser()
方法来添加表单组对象,调用removeUser()
方法来移除表单组对象,调用submitForm()
方法来提交表单。在模板中使用formArrayName
和formGroupName
指令来绑定表单控件和校验规则。
这样,我们就可以实现表单组对象数组的绑定和验证。