在Angular中,可以使用FormArray来管理多个无限相同的表单。以下是一个解决方法的示例代码:
首先,创建一个表单组件,用于表示每个表单的模板。在该组件中,使用Reactive Forms来创建表单,并将表单控件绑定到对应的数据模型。
template.html:
component.ts:
import { Component, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-form-template',
templateUrl: './form-template.component.html',
styleUrls: ['./form-template.component.css']
})
export class FormTemplateComponent {
@Input() form: FormGroup;
}
接下来,在父组件中创建一个FormArray,并使用ngFor指令来迭代生成多个表单组件。每个表单组件都会使用FormArray中的一个FormControl,并将其与表单组件进行绑定。
template.html:
component.ts:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-form-array',
templateUrl: './form-array.component.html',
styleUrls: ['./form-array.component.css']
})
export class FormArrayComponent implements OnInit {
form: FormGroup;
formArray: FormArray;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.form = this.formBuilder.group({
forms: this.formBuilder.array([])
});
this.formArray = this.form.get('forms') as FormArray;
}
addForm() {
const formGroup = this.formBuilder.group({
name: '',
email: ''
});
this.formArray.push(formGroup);
}
removeForm(index: number) {
this.formArray.removeAt(index);
}
}
在父组件中,通过formBuilder创建一个FormGroup和FormArray,并在addForm方法中使用formBuilder创建一个FormGroup并添加到FormArray中。removeForm方法用于移除指定索引的表单。
最后,在父组件的模板中,使用FormArray的controls属性来迭代生成表单组件。通过将每个表单组件的form属性绑定到FormArray中的一个FormControl,实现了多个无限相同的表单的管理。
注意:为了使上述代码正常运行,需要在父组件的模块文件中导入ReactiveFormsModule,并在组件的providers数组中提供FormBuilder。
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
ReactiveFormsModule
],
...
})
export class AppModule { }
这样,你就可以使用FormArray来管理多个无限相同的表单了。