在Angular 7中,可以使用FormArray
来处理具有相同表单控件名称的多个字段。下面是一个使用FormArray
的示例代码:
首先,在组件的FormGroup
中创建一个FormArray
,并在它下面添加多个字段:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.form = this.fb.group({
fields: this.fb.array([])
});
// 添加三个字段
this.addNewField();
this.addNewField();
this.addNewField();
}
addNewField() {
const fields = this.form.get('fields') as FormArray;
fields.push(this.createField());
}
createField() {
return this.fb.group({
name: '',
value: ''
});
}
onSubmit() {
// 处理表单提交逻辑
}
}
然后,在模板中循环遍历fields
数组,并为每个字段创建一个表单控件:
通过以上代码,你可以创建多个具有相同名称的字段,并在表单中进行操作。当你提交表单时,可以通过form.value
来获取所有字段的值。