javascript - Parcurgerea unui array de formulare dintr-un grup de formulare în Angular

Primeasc o listă de date de la server și vreau să le afișez într-o listă de span-uri așa cum urmează:

Fiecare rând corespunde unui element din listă și rețineți că am creat această listă cu *ngFor astfel:

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>

După ce rulez acest cod, browserul îmi dă următorul rezultat:

Eroare:

Nu există un accesoriu de valoare pentru controlul formularului cu calea: 'person -> 0 -> name'

Dar știu că ar trebui să folosesc myForm.controls.person.controls în loc de serverData în bucla for, dar vreau să am ambele lista și controalele împreună.

Ar trebui să folosesc două bucle for, dintre care una iterează peste datele serverului și cealaltă peste controalele formularului sau ar trebui să folosesc o altă metodă?

Răspuns #1

Trebuie să împingi toate obiectele din serverData în formarray-ul tău, astfel încât lungimile array-urilor să fie aceleași ca array-ul serverData. Șablonul tău rămâne așa cum este în prezent, dar în componentă, mapează valorile din serverData și împinge obiectele cu proprietățile dorite în 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 }))
  );
}

DEMO: STACKBLITZ

Răspunsul #2

NOTĂ: Îmi place bucla din div-ul lui 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>

Dacă iterați peste myForm.controls.person.controls, formGroupName are întotdeauna valoare, dacă aveți un array și îl declarați ÎNAINTE de a crea formularul, în starea inițială a aplicației, FormArray nu este creat