javascript - 循环遍历表单组 Angular 内的表单数组

Question

我从服务器获取数据列表，我想在 list of span 中显示它们，如下所示:

每一行对应列表中的一项，请注意我使用 *ngFor 创建此列表，如下所示:

this.myForm = this.fb.group({
            person: this.fb.array([
                this.fb.group({
                    name: [''],
                    address: ['']
                })
            ])
        })

<form [formGroup]="myForm">
      <div formArrayName="person" *ngFor="let person of serverData; let personIndex = index">
          <div [formGroupName]="personIndex">
              <input formControlName="name"/>
              <input formControlName="address"/>
          </div>
      </div>
</form>

运行这段代码后，浏览器给我这个:

错误:

No value accessor for form control with path: 'person -> 0 -> name'

但我知道我应该在 for 循环中使用 myForm.controls.person.controls 而不是 serverData，但我想同时使用 列表和控件在一起。

我应该使用两个 for 循环，其中一个循环遍历服务器数据，另一个循环遍历表单控件，还是我应该使用另一种方式？

Answer 1

您必须将所有对象从 serverData 推送到您的 formarray，以便数组长度与 serverData 数组相同。您的模板保持当前状态，但在组件中，映射 serverData 中的值并将具有您想要的属性的对象推送到 formarray:

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.myForm = this.fb.group({
    persons: this.fb.array([])
  });
  this.data();
}

get person() {
  return this.myForm.get("persons") as FormArray;
}

private data() {
  this.serverData = [
    {
      name: "1",
      desc: "one"
    },
    {
      name: "2",
      desc: "two"
    },
    {
      name: "3",
      desc: "three"
    }
  ];

  this.serverData.map(d =>
    this.person.push(this.fb.group({ name: d.name, address: d.desc }))
  );
}

演示:STACKBLITZ