Angular响应式表单动态生成表单控件

开发中可能会遇到这种需要：根据后台传过来的数据填入表单中，供用户查看与编辑，如果传过来的数据长度、格式固定，那么很好做，但如果传过来的数据长度是变化的，那么使用普通方式进行创建控件就显得行不通了。要想实现这种需求，只能借助FormArray，根据数据量进行动态创建了。

假如后台传过来的数据为：

  arrData=[
    {name:"张三",sex:"男"},
    {name:"李四",sex:"男"},
    {name:"王五",sex:"男"},
    {name:"赵六",sex:"男"}
  ]

则可以根据需要在适当的时机创建表单控件

 constructor(
    private fb: FormBuilder
 ) { }
  
 ngOnInit() {
 	//动态创建表单控件
    this.arrData.forEach(item=>{
      this.myFormArray.push(this.fb.control(item.name))
    })
 }
 
 formGroup1 = new FormGroup({
  	formArray: this.fb.array([
      // this.fb.control('')
    ])
 })
 
  //通过getter访问控件获取每个实例
 get myFormArray(){
    return this.formGroup1.get("formArray") as FormArray;
 }

 submitMethod2(){
    console.log(this.formGroup1.value);
 }

在模板中展示

<form id=formId2 (ngSubmit)="submitMethod2()" [formGroup]="formGroup1" #refForm2="ngForm">
  <div  formArrayName="formArray">
    <div class="form-div" *ngFor="let item of myFormArray.controls;let i=index">
      <textarea class="form-textarea" name="" id="" cols="30" rows="10" [formControlName]="i"></textarea>
      <!-- <input type="text" [formControlName]="i"> -->
    </div>
  </div>
  <button type="submit">Submit2</button>
</form>

要注意的是
1、formArray是在formGroup1的属性，所以不要忘了添加formArrayName="formArray"
2、ngFor中循环的是myFormArray.controls，是复数形式，且没有提示，不要写错
3、formControlName是属性绑定形式，绑定的是下标[formControlName]="i"
如果有其他的需求，比如某个表单控件禁用等，都可以通过在循环生成的时候进行控制

结果展示：