在Angular中,可以使用FormArray
来创建动态表单控件。以下是一个示例代码:
在组件的HTML模板中,使用FormArray
来动态生成表单控件:
在组件的TS文件中,创建动态表单控件并关联到FormArray
:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
dynamicControls: this.fb.array([])
});
// 添加初始表单控件
this.addControl();
}
get dynamicControls() {
return this.myForm.get('dynamicControls') as FormArray;
}
addControl() {
const control = this.fb.control('');
this.dynamicControls.push(control);
}
removeControl(index: number) {
this.dynamicControls.removeAt(index);
}
}
在上面的代码中,我们使用FormBuilder
来创建FormGroup
和FormControl
。在ngOnInit
方法中,我们初始化了一个空的FormGroup
和一个空的FormArray
。然后,我们使用addControl
方法来添加动态表单控件,并使用removeControl
方法来删除表单控件。
这样,我们就可以根据需要动态地添加和删除表单控件了。