Angular 单选按钮的动态响应式嵌套 FormArray

Question

在 API 通话中，我有一系列问题及其选项 JSON。

 [
  {
    "QuestionText": "Question goes here...",
    "AnswerChoice": [
      {
        "text": "text1",
        "answerId": "1"
      },
      {
        "text": "text2",
        "answerId": "2"
      },
      {
        "text": "text3",
        "answerId": "3"
      },
      {
        "text": "text4",
        "answerId": "4"
      },
      {
        "text": "text5",
        "answerId": "5"
      }
    ],
    "questionId": "1"
  },
  {
    "QuestionText": "Second question goes here...?",
    "AnswerChoice": [
      {
        "text": "text1",
        "answerId": "1"
      },
      {
        "text": "text2",
        "answerId": "2"
      },
      {
        "text": "text3",
        "answerId": "3"
      },
      {
        "text": "text4",
        "answerId": "4"
      },
      {
        "text": "text5",
        "answerId": "5"
      }
    ],
    "questionId": "2"
  }
  ... and so on.
]

答案选项是 UI 中的单选按钮。

所以，现在是问题。

我正在尝试为这个问题构建一个响应式表单。我想不出解决办法。我正在尝试构建嵌套的 FormArrays 但徒劳无功。

我解决这个问题的尝试：

HTML -

        <form [formGroup]="eidFormSubmission">
        <div>
            <div *ngFor="let question of questions; let i = index">
                <p>
                    {{i+1}}. {{question.QuestionText}}
                </p>
                <div class="form-group">
                    <div>
                        <div class="custom-control custom-radio"
                            *ngFor="let answer of question.AnswerChoice let k=index">
                            {{question.questionId}}
                            <input [value]="answer.answerId" type="radio" formControlName="i"
                                id="{{question.questionId}}" name="quesAnswer"
                                class="custom-control-input">
                            <label class="custom-control-label" for="{{question.questionId}}">
                                {{ answer.text }}</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button (click)="onSubmitAnswers()" class="btn btn-primary">Next</button>
    </form>

TS -

  eidFormSubmissionInit(){
    const formArray = this.formBuilder.array([]);
    this.eidFormSubmission = this.formBuilder.group({
      questions: formArray
    })
  }

现在我对如何动态推送（在 API 响应后）到 formbuilder 感到困惑。

第二个问题是单选按钮，当我 select 第二个问题的一个选项它从第一个问题中删除 select 时。

如有任何帮助，我们将不胜感激！

Answer 1

检查这个：

首先创建一个这样的表单，其中 "questions" 作为 FormArray:

this.eidFormSubmission = this.fb.group({
  questions: this.fb.array([])
});

在你的 ngOnInit 中收到问题后，遍历每个问题并将新项目添加到 "questions" formArray

  ngOnInit() {
    this.dataService.getQuestions().subscribe((data: any[]) => {
      console.log(data);
      this.questions = data;

      this.questions.forEach(question => {
        (this.eidFormSubmission.get('questions') as FormArray).push(this.addQuestionFormGroup(question));
      });
    });
  }

使用这个效用函数：

  private addQuestionFormGroup(question: any): FormGroup {
    return this.fb.group({
      QuestionText: question.QuestionText,
      AnswerChoice: new FormControl()
    });
  }

html 标记：

<form (ngSubmit)="onSubmitAnswers()" [formGroup]="eidFormSubmission">
  <table>
    <tr formArrayName="questions" *ngFor="let data of eidFormSubmission.get('questions').controls; let i = index">
      <ng-container [formGroupName]="i">
        <th>
          <input type="text" formControlName="QuestionText" readonly>
        </th>
        <th *ngFor="let answer of questions[i].AnswerChoice">
          <input type="radio" formControlName="AnswerChoice" value="{{answer.answerId}}">{{answer.text}}
        </th>
      </ng-container>
    </tr>
  </table>
  <br>
  <button type="submit">Submit</button>
</form>

工作stackblitz

Angular 单选按钮的动态响应式嵌套 FormArray

Angular Dynamic Reactive Form Nested FormArray for Radios Buttons

typescript

angular

angular-forms

angular-formbuilder