Angular 6 嵌套动态反应形式

Question

我正在努力理解如何实现嵌套的 ReactiveForm。我有一系列问题和一系列答案。答案将在单选按钮组中。但是，我不知道每个问题有多少问题，也不知道有多少答案。我将从 API.

中检索

每个问题都需要一个答案。

例如

    <form class="form-group" id="{{prefix+'QuestionsForm'}}" [formGroup]="Form">
            <div class="form-group" id=" 
                {{prefix+'QuestionsAnswers'+'_'+i}}" *ngFor="let question of questions; index as i;">
                <div class="row">
                    <div class="col-xs-1 question-col">{{(i+1)+'. '}}</div>
                    <div id="{{prefix+'Question'+'_'+i}}" class="col-xs-11 no-padding-left>{{question.question}}</div>
                </div>
                <!--<div class="alert alert-danger gap-top-small alert-dismissible fade in experian" role="alert" style="display: block;">
                    <div class="glyphicon glyphicon-remove-sign color5 floatLeft"></div>
                    <div class="left-indent-text-block">Please select an option.</div>
                </div>-->
                <div class="row space-bottom-large">
                    <div class="col-xs-12 space-top-large">
                        <div class="radio-button space-top-small">
                            <div id="{{prefix+'Answers'+'_'+i}}" class="row space-left-large">
                                <div class="col-xs-12 space-bottom-large" *ngFor="let answer of question.answers; index as a">
                                    <input type="radio" name="{{'radio-group_'+i}}" id="{{prefix+'AnswerInput'+'_'+i+'_'+a}}" [value]="answer">
                                    <label id="{{prefix+'AnswerLabel'+'_'+i+'_'+a}}" for="{{prefix+'AnswerInput'+'_'+i+'_'+a}}">
                                        <span class="pull-left>
                                            {{answer}}
                                        </span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

this.questions = [
    {
      question: "What is your favorite color?",
      answers: ["red", "blue", "green"]
    },
    {
      question: "What is your favorite animal?",
      answers: ["lion", "tiger", "dog", "cat"]
    },
    ..........
]

所以我认为 ReactiveForm 结构应该是：

Form: FormGroup(
  Questions: FormArray([
    Answers: FormArray([], Validators.required)
  ])
)

或者应该是：

Form: FormGroup(
  Questions: FormArray([
    Question: "",
    Answer: FormControl(Validators.required)
  ])
)

或者其他结构？

我不明白我应该使用哪种 ReactiveForm 结构来构建表单以允许未知数量的问题和答案。但要求每个问题都选择一个答案。

非常感谢您的帮助。

Answer 1

you have to create a dynamic component to display the question list

https://angular.io/guide/dynamic-form

Answer 2

您要查找的反应形式的结构是这样的：

FormGroup({
    Questions: FormArray([
        FormControl(Validators.required),
        FormControl(Validators.required),
        ...
    ])
})

基本上你想为每个问题添加一个条目到 FormArray。每个条目都包含一个用于单选按钮组的 FormControl。所以一个问题的所有答案共享一个FormControl。

我也根据你的要求做了一个Plunker的例子：

Angular 6 nested dynamic reactive form radio button example

您可以将表单记录到 Plunker 控制台并进行调查。

希望对您有所帮助。

Angular 6 嵌套动态反应形式

Angular 6 nested dynamic reactiveform

typescript

angular

angular6