Html 动态FormControl值在Angular 上绑定错误的问题

如果您必须使用原来的方法，我建议您只需要一个名为question的控件，并在需要的地方更新/重置值，我们可以使用不同的属性output来跟踪保存的值！

import { Component } from '@angular/core';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  Validators,
} from '@angular/forms';

interface Question {
  id: string;
  label: string;
}

@Component({
  selector: 'app-minimal-form',
  template: `
    <form [formGroup]="myForm">
      <label>{{ questions[currentQuestionIndex]?.label }}</label>
      <input type="text" formControlName="question">
      <button type="button" (click)="goToNextQuestion()">Next Question</button>
    </form>
    {{output | json}}
  `,
})
export class AppComponent {
  myForm: FormGroup;
  currentQuestion: Question;
  questions: Question[] = [
    { id: 'A', label: 'Question A' },
    { id: 'B', label: 'Question B' },
  ];
  currentControlName: string;
  currentQuestionIndex = 0;
  output: any = {};

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.myForm = this.fb.group({
      question: this.fb.control('', Validators.required),
    });
  }

  goToNextQuestion(): void {
    if (this.currentQuestionIndex < this.questions.length) {
      const currentQuestionCtrl = this.myForm.get('question');
      this.output[`question_${this.questions[this.currentQuestionIndex].id}`] =
        currentQuestionCtrl.value;
      currentQuestionCtrl.reset();
      if (this.currentQuestionIndex + 1 !== this.questions.length) {
        this.currentQuestionIndex++;
      }
    }
  }
}

Stackblitz Demo个

在HTML上需要与表单控件相关联的输入，我们不能用不同的表单控件名称交换输入并期望它能工作！这是另一种方法，在开始时设置输入，然后使用HTML属性hidden隐藏/显示当前值，这是使用currentQuestionIndex中的索引跟踪的，这似乎很有效！

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

interface Question {
  id: string;
  label: string;
}

@Component({
  selector: 'app-minimal-form',
  template: `
    <form [formGroup]="myForm">
      <ng-container *ngFor="let question of questions; trackBy: track; let i = index">
        <span [hidden]="i !== currentQuestionIndex">
          <label>{{ questions[i].label }}</label>
          <input type="text" [formControlName]="'question_' + question.id">
        </span>
      </ng-container>
      <button type="button" (click)="goToNextQuestion()">Next Question</button>
    </form>

    {{myForm.value | json}}
  `,
})
export class AppComponent {
  myForm: FormGroup;
  currentQuestion: Question;
  questions: Question[] = [
    { id: 'A', label: 'Question A' },
    { id: 'B', label: 'Question B' },
  ];
  currentQuestionIndex: number = 0;

  constructor(private fb: FormBuilder) {}

  track(index: number, item: Question) {
    return item.id;
  }

  ngOnInit(): void {
    this.currentQuestion = this.questions[0];
    this.myForm = this.fb.group({});
    this.currentQuestionIndex = 0;
    this.questions.forEach((question: Question) => {
      this.myForm.addControl(
        `question_${question.id}`,
        this.fb.control('', Validators.required)
      );
    });
  }

  goToNextQuestion(): void {
    this.currentQuestionIndex++;
  }
}

Stackblitz Demo