在angular2中动态创建多个表单

Question

我从数据库中获取一些数据，并根据我想要创建表单的结果数量。例如。如果我得到总共3行的列作为名称，年龄和类。然后我需要创建三个表单元素，名称，年龄和类作为表单元素。提前致谢

Answer 1

您可以使用FormArray创建多个表单组。

使用FormBuilder，我们可以为FormControls创建一个FormGroup。在FormGroup中，将变量定义为FormArray，并将FormControls动态添加到该数组中。

public dataForm = FormGroup;
const dbData = // data from database eg. [{name:x, age: 8, class: A},..]
...
constructor(
    private _fb: FormBuilder
) {}
...
ngOnInit() {
    this.dataForm = this._fb.group({
       subFormList: this._fb.array([])
    });
    this.getValues();
}
getValues() {
   const control = <FormArray> this.dataForm.get('subFormList');
   for (row of this.dbData) {
      const temp = this._fb.group({
         name: [row['name']],
         age: [row['age']],
         class: [row['class']]
      });
      control.push(temp);
   }
}

希望这会对你有所帮助。