用于单选按钮的角动态反应形式嵌套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中感到困惑。

第二个问题是单选按钮，当我从第二个问题中选择一个选项时，它从第一个问题中取消了选择。

任何帮助将不胜感激！

Answer 1

检查此：

首先创建一个这样的表单，其中的“问题”作为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

Answer 2

请检查此网址。How to create forms dynamically in Angular 7 using FormControl

并且输入FormControlName值必须与输入名称值相同。

希望对您有帮助。

谢谢