angular 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()
  })

Forked Stackblitz

angular 5种动态反应形式

angular 5 dynamic reactive forms

html

forms

typescript

angular

angular-reactive-forms