将JSON数组绑定到Angular嵌套FormGroup时地址输入框数据绑定失效求解

问题原因 #

你在构造FormArray时直接传入了普通对象数组，FormBuilder.array()仅接收响应式表单控件（FormGroup/FormControl/FormArray）组成的数组，普通对象不会被自动转换为表单控件实例，因此无法和模板中的formControlName建立绑定关联。

修复方案 #

第一步：修改组件TS代码 #

新增地址对象转FormGroup的工具方法，同时遍历地址数组完成控件转换：

import { FormGroup, FormArray } from '@angular/forms'; // 记得导入需要的类型

export class UpdateFormComponent implements OnInit {
  myForm : FormGroup;
  myPost: any;

  constructor(private fb: FormBuilder) { }

  // 新增getter，简化模板中获取FormArray的写法
  get addressFormArr(): FormArray {
    return this.myForm.get('address') as FormArray;
  }

  // 新增方法：将单个地址对象转换为FormGroup
  private buildAddressForm(address: Record<string, any>): FormGroup {
    return this.fb.group({
      id: [address.id],
      type: [address.type],
      rue: [address.rue],
      numero: [address.numero],
      ville: [address.ville],
      codepst: [address.codepst],
      pays: [address.pays],
      commentaire: [address.commentaire]
    })
  }

  ngOnInit(): void {
    this.myPost = this.displayPost(this.id)
    this.myForm = this.fb.group({
      name: this.myPost.name,
      surname: this.myPost.surname,
      birthday: this.myPost.birthday,
      // 遍历原地址数组，每个对象转为FormGroup后再构造FormArray
      address: this.fb.array(
        this.myPost.address.map(item => this.buildAddressForm(item))
      )
    })
  }
}

第二步：优化模板代码（可选） #

可以用组件中定义的getter简化FormArray的读取逻辑，原有控件绑定逻辑不用修改：

<form [formGroup]="myForm">
    Value: {{ myForm.value | json}}
    <hr>
    <mat-form-field>
        <input matInput placeholder="Nom" formControlName="name">
    </mat-form-field>
    
    <mat-form-field>
        <input matInput placeholder="Prénom" formControlName="surname">
    </mat-form-field>
    
    <mat-form-field>
        <input matInput placeholder="Date de naissance" formControlName="birthday">
    </mat-form-field>
    <br>
    <br>
    <div *ngIf="addressFormArr.length > 0" formArrayName="address" >
        <div *ngFor="let address of addressFormArr.controls; let i=index" [formGroupName]="i">
            <mat-form-field>
                <input matInput placeholder="identifiant" formControlName="id">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="type" formControlName="type">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="rue" formControlName="rue">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="numero" formControlName="numero">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="ville" formControlName="ville">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="codepst" formControlName="codepst">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="pays" formControlName="pays">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="commentaire" formControlName="commentaire">
            </mat-form-field>
        </div>
    </div> 
    <br>
</form>

修改完成后地址输入框即可正常和表单值双向绑定，输入内容会同步更新到myForm.value中。

内容的提问来源于stack exchange，提问作者Daoudi Yassine