在表单组 angular 中循环遍历表单数组

Question

我从服务器获取数据列表，我想在 跨度列表 中显示它们，如下所示：

每一行对应列表的一项，请注意，我使用 *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，但我想要 both 列表和控件在一起。

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

Answer 1

注意：我喜欢循环是 n 的 div of fromGroupName

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

如果您遍历 myForm.controls.person.controls，则 formGroupName 始终具有值，如果您有一个数组并在创建表单之前声明，在应用程序的第一个状态下，不会创建 FormArray

Answer 2

您必须将 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

在表单组 angular 中循环遍历表单数组

Looping through form array inside form group angular

javascript

html

angular

typescript

angular-forms