Несколько экземпляров FormArray с угловыми 5 реактивными формами

Question

У меня есть массив форм, который я хотел бы дублировать для каждой итерации цикла *ngFor. Моя форма настроена в модели следующим образом:

initProducts() {
    return this.fb.group({
      begTally: ['', Validators.required],
      endTally: ['', Validators.required],
    }) 
  }

  ngOnInit() {
    this.productionForm = this.fb.group({
      products: this.fb.array([
        this.initProducts()
      ])
    })
  }

Когда я распечатываю форму в виде с {{ myform.value | json }}, я вижу только одну итерацию массива формы. Вот вам StackBlitz с полной настройкой. Я также хотел бы исправить значения в элементах управления формы из моего prodData json. Не уверен, что я делаю не так.

Answer 1

В вашем примере с Stackblitz вы были не так уж и далеко!

Вот мое предложение:

this.productionForm = this.fb.group({
  production: this.fb.array(
    this.prodData
      // for each...
      .groups
      .reduce((acc, group) => [
        ...acc,
        // ...product of each group
        ...group.products.map(product =>
          // create a form group
          this.fb.group({
            begTally: [product.begTally, Validators.required],
            endTally: [product.endTally, Validators.required],
          })
        )
      ], [])
  )
})

• , чтобы создать массив форм, вам нужно заключить его в группу форм(здесь он называется production)
• , затем зацикливание на группах с помощью reduce, что позволяет вам затем зацикливать на всех товарах из каждой группы
• построить группу форм для каждой из них

С точки зрения, это немного сложнее, так как вы хотите получить доступ к данным, которые не хранятся в форме.Поэтому мы должны смешать исходные данные с данными в нашей форме:

<form [formGroup]="productionForm">
  <table *ngFor="let group of prodData.groups; let i = index">
    <thead>
      <th class="group-name">
        <span>{{group.name}}</span>
      </th>
      <th>Beginning Tally</th>
      <th>Ending Tally</th>
      <th>Total</th>
    </thead>

    <tbody formArrayName="production">
      <tr *ngFor="let product of group.products; let j=index" [formGroupName]="i + j">
        <td>{{product.name}}</td>

        <td>
          <input type="number" formControlName="begTally">
        </td>

        <td>
          <input type="number" formControlName="endTally">
        </td>

        <td>
          {{ product.begTally + product.endTally }}
        </td>
      </tr>
    </tbody>
  </table>
</form>

Вот мой форк вашего Stackblitz с рабочим примером:
https://stackblitz.com/edit/angular-kvlxnp?file=src%2Fapp%2Fapp.component.ts

Answer 2

Вы должны иметь такое же количество групп в форме, как и в разметке. Например

this.productionForm = this.fb.group({
  products: this.fb.array([
    this.initProducts(),
    this.initProducts(),
    this.initProducts()
  ])
})

исправит проблему, а это означает, что вам нужно включить ту же коллекцию, что итерация *ngFor, и создать ту же сумму FormControls