下面是一个使用FormArray的动态表单的示例:
在组件中,首先导入必要的模块和类:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';
然后,在组件类中创建表单和FormArray:
@Component({
selector: 'app-dynamic-form',
template: `
`
})
export class DynamicFormComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
items: this.fb.array([])
});
}
get items() {
return this.myForm.get('items') as FormArray;
}
addItem() {
const itemGroup = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
});
this.items.push(itemGroup);
}
removeItem(index: number) {
this.items.removeAt(index);
}
onSubmit() {
if (this.myForm.valid) {
console.log(this.myForm.value);
// Submit the form data
}
}
}
在模板中,我们使用formGroup、formArrayName和formGroupName指令来绑定表单和FormArray。
在组件类中,我们使用FormBuilder创建一个FormArray,并使用addItem和removeItem方法来添加和删除表单控件。
最后,在onSubmit方法中,我们可以验证表单并提交数据。
这是一个简单的示例,你可以根据自己的需求进行扩展和定制。