当使用Angular的FormBuilder创建表单时,我们可以使用FormArray来表示一组动态表单控件。但有时候可能遇到FormArray无法正确绑定到FormControls的情况。
以下是一个示例解决方法:
首先,确保在组件中引入所需的Angular模块。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
接下来,在组件类中创建一个表单,并使用FormBuilder创建FormArray。
@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({
myArray: this.fb.array([])
});
}
}
在模板文件中,我们可以使用FormArray的controls属性来遍历并绑定到每个FormControls。
注意:在模板中使用FormArray的controls属性时,需要使用formArrayName指令来将FormArray绑定到表单。
最后,在组件类中,可以使用FormArray的push方法来添加新的FormControls。
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
myArray: this.fb.array([])
});
// 添加初始的FormControls
this.addControl();
}
addControl() {
const control = this.fb.control('');
(this.myForm.get('myArray') as FormArray).push(control);
}
onSubmit() {
// 处理表单提交逻辑
}
}
通过以上步骤,我们可以正确地将FormArray绑定到FormControls,并且能够动态添加和删除表单控件。