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>

运行此代码后，浏览器将显示以下内容：

错误：

没有用于窗体控件的值访问器，其路径为：'person-> 0-> name'

但是我知道我应该在循环中使用myForm.controls.person.controls而不是serverData，但是我想同时拥有两者列表和控件

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

Answer 1

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

<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组的

2 个答案: