在Angular中,可以使用FormArray
来动态添加字段。下面是一个例子:
首先,在组件中定义一个FormGroup
和一个FormArray
:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-root',
template: `
`,
})
export class AppComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
fields: this.fb.array([]),
});
}
get fields() {
return this.myForm.get('fields') as FormArray;
}
addField() {
this.fields.push(this.fb.control(''));
}
onSubmit() {
console.log(this.myForm.value);
}
}
然后,在模板中使用*ngFor
指令来遍历fields
数组,并为每个字段创建一个输入框。formControlName
指令用于将输入框与FormArray
中的控件关联起来。
通过addField()
方法,可以通过调用push()
方法将新的控件添加到fields
数组中。
最后,当用户提交表单时,可以通过访问myForm.value
来获取所有字段的值。
请注意,上述代码需要在@angular/forms
模块中导入FormBuilder
、FormGroup
和FormArray
。确保在使用这个解决方案之前已经安装了@angular/forms
模块。