在Angular 8中,可以使用FormArray和formControlName来处理动态表单中的多个表单控件。以下是一个解决方案示例:
首先,创建一个包含FormArray的父表单组:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } 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 formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
myFormArray: this.formBuilder.array([])
});
}
get formArrayControls() {
return this.myForm.get('myFormArray')['controls'];
}
addFormControl() {
const formControl = this.formBuilder.control('');
this.myForm.get('myFormArray')['controls'].push(formControl);
}
removeFormControl(index: number) {
this.myForm.get('myFormArray')['controls'].splice(index, 1);
}
submitForm() {
console.log(this.myForm.value);
}
}
接下来,在模板文件(my-form.component.html)中使用FormArray和formControlName:
在上面的示例中,使用formArrayName指令来绑定FormArray,使用formGroupName指令来绑定每个表单控件的FormGroup,然后使用formControlName指令来绑定每个FormControl。
在组件中,我们使用formBuilder来创建表单控件和表单组,并通过myForm.get('myFormArray')['controls']来获取FormArray的所有表单控件。然后我们可以使用addFormControl和removeFormControl方法来动态添加或删除表单控件。
最后,在submitForm方法中,我们可以使用this.myForm.value来获取表单的值,并进行其他操作。