如何将对象数组映射到 Angular 中的 formarray

Question

将数据数组映射到复选框表单数组的正确方法是什么？我尝试了下面的代码，但它不起作用......目标是从 httpclient 获取信息并将其映射到数据数组，这没问题，但无法正确地将数据数组映射到形成数组......

data = [
      { id: false, name: "Ovo" },
      { id: false, name: "Ono" },
      { id: false, name: "Levo" },
      { id: false, name: "Desno" }
    ];

this.postForm = this.fb.group({
      osnovne: this.fb.group({
        sekcija: ["market", Validators.required],
        kategorija: "",
        cena: [""],
        dogovor: false,
        opis: ""
      }),
      detaljne: this.fb.group({
        select: this.fb.array([]),
        checkboxes: this.fb.array([])
      }),

      imagePath: this.fb.group({
        data: ""
      })
    });

模板

<form [formGroup]="postForm">
  <div formGroupName="detaljne">
    <div
      formArrayName="checkboxes"
      *ngFor="let data of data; let i = index"
    >
      <input [id]="data.id" type="checkbox" [formControl]="checkboxes[i]" />
      <label [for]="data.id">
        {{ data.name }}</label
      >
    </div>
  </div>
</form>

Answer 1

您只需要在索引的复选框数组基础中设置 formControtName

这是我设置控件数据的方式 updateDataControls

  ngOnInit() {
    const cData: IControls<boolean>[] = [
      { value: false, name: "Ovo" },
      { value: true, name: "Ono" },
      { value: false, name: "Levo" },
      { value: true, name: "Desno" }
    ]
    this.updateDataControls(cData)

  }

  updateDataControls(controls: IControls<any>[]) {
    this.data = controls;
    const controlsForm = this.form.get('controls').get('checkboxes') as FormArray;
    for (const c of controls) {
      controlsForm.push(this.fb.control(c.value))
    }
  }

模板

<div [formGroup]="form">
    <div formGroupName="controls">
        <div formArrayName="checkboxes">
            <div *ngFor="let c of data;let index = index">
                <label>{{c.name}}</label>
        <input type="checkbox" [formControlName]="index" >
      </div>
     </div>
  </div>
</div>

在 stackblitz demo

查看完整示例

如何将对象数组映射到 Angular 中的 formarray

How to map object array to formarray in Angular

angular

angular-forms

formarray