Angular中的表单是通过控件来实现的,每个控件都有一个唯一的名称,称为FormControlName。通常情况下,这个FormControlName是在组件的模板中定义的。但是,有时候需要在运行时动态地创建一个FormControlName。
要在Angular中实现动态FormControlName,可以通过以下代码示例来实现:
在组件中定义一个formGroup的实例和一个FormControlName的动态数组:
import { FormGroup, FormControl } from '@angular/forms';
export class MyComponent {
formGroup: FormGroup;
formControlNames: string[];
constructor() {
this.formGroup = new FormGroup({});
this.formControlNames = ['username', 'password'];
}
}
在模板中使用*ngFor循环来创建动态表单控件:
此时formGroup实例中就会动态生成一个FormControlName数组,通过*ngFor循环渲染出多个相应的表单控件。
通过这种方式,就可以实现动态FormControlName来动态生成不同的表单控件,很好的满足了一些特殊的需求。