угловые 5 динамических реактивных форм

Question

Я пытаюсь динамически представить пользователям набор вопросов для каждого выбранного продукта.

Я создал форму FormGroup, а затем перебираю выбранные продукты и вкладываю группу вопросов под каждым продуктом.

В некоторой степени это похоже на работу. Форма создана, я вижу ее через канал JSON и могу взаимодействовать с ней.

Проблема, однако, заключается в том, что все элементы управления формы для каждого продукта обновляют только элементы управления для последнего продукта (что я могу увидеть через {{form.value | JSON}}

Пример кода:

https://stackblitz.com/edit/angular-py4sam

app.component.ts

import { Component, NgModule, VERSION, OnInit } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormControl, FormGroup, FormArray, ReactiveFormsModule, Validators } from '@angular/forms';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  questionsForm: FormGroup;
  qaForm: FormGroup;
  questions = [
    {
      'question': 'like?',
      'value': ''
    },
    {
      'question': 'own?',
      'value': ''
    }
  ]

  products = [
    {
      'make': 'fender'
    },
    {
      'make': 'gibson'
    }
  ]

  createQuestionsForm() {

    this.questionsForm = new FormGroup({
      questions: new FormArray([])
    });

    const qArray = <FormArray>this.questionsForm.controls['questions'];

    this.questions.forEach((item, index) => {
      const aGroup = new FormGroup({
          answer: new FormControl(item.question),
          value: new FormControl(item.value)
      })

      qArray.push(aGroup);

    })
  }

  ngOnInit() {

    this.createQuestionsForm();

    this.qaForm = new FormGroup(
      {
        qa: new FormArray([])
      });

    const qaFormArray = <FormArray>this.qaForm.controls['qa'];

    this.products.forEach((item, index) => {

      const fg = new FormGroup({
        make: new FormControl(item.make),
        form: this.questionsForm
      })

      qaFormArray.push(fg);

    })
  }
}

app.component.html

<h3>FORM</h3>

<form [formGroup]="qaForm">

    <div formArrayName='qa'>

        <div *ngFor="let prod of products; let productCount = index">

            <h3>{{ prod.make }}</h3>

            <div [formArrayName]=productCount>

                <div formGroupName="form">

                    <div formArrayName="questions">

                        <div *ngFor="let q of questions; let qCount = index">

                            <div [formArrayName]=qCount>

                                <input type="checkbox" formControlName="value"> {{ q.question }}

                            </div>

                        </div>

                    </div>

              </div>

        </div>

    </div>

</div>
</form>

<p>qaform {{ qaForm.value | json }}</p>

Answer 1

Проблема в том, что вы используете один и тот же questionsForm для всех продуктов:

const fg = new FormGroup({
  make: new FormControl(item.make),
  form: this.questionsForm
        ^^^^^^^^^^^^^^^
})

Чтобы исправить это, вам нужно создать questionsForm для каждого продукта.

Вот как это можно сделать:

createQuestionsForm() {

  const questionsForm = new FormGroup({
    questions: new FormArray([])
  });

  const qArray = <FormArray>questionsForm.controls['questions'];

  this.questions.forEach((item, index) => {

    const aGroup = new FormGroup({
      answer: new FormControl(item.question),
      value: new FormControl(item.value)
    })

    qArray.push(aGroup);

  })

  return questionsForm;
}
...
this.products.forEach(
  ...
  const fg = new FormGroup({
    make: new FormControl(item.make),
    form: this.createQuestionsForm()
  })

Разветвленный стек-блиц