在Angular 6中使用动态表单和多个表单组有以下解决方法:
ReactiveFormsModule
模块来处理动态表单的数据绑定和验证。import { ReactiveFormsModule, FormGroup, FormArray, FormBuilder } from '@angular/forms';
@NgModule({
imports: [
ReactiveFormsModule
]
})
export class AppModule { }
FormGroup
实例来表示整个表单,并使用FormBuilder
来构建表单控件。export class MyComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
groups: this.fb.array([])
});
}
get groupControls() {
return (this.myForm.get('groups') as FormArray).controls;
}
addGroup() {
const group = this.fb.group({
// 添加表单控件
});
(this.myForm.get('groups') as FormArray).push(group);
}
removeGroup(index: number) {
(this.myForm.get('groups') as FormArray).removeAt(index);
}
}
formArrayName
指令和*ngFor
指令来渲染多个表单组。
通过以上步骤,我们就可以创建一个动态表单,并可以根据需要添加或删除表单组。每个表单组都可以使用formGroupName
指令来访问和处理表单控件。请根据实际需求在代码中添加适当的表单控件。
上一篇:Angular 6动画无法显示