Я изо всех сил пытаюсь понять, как реализовать вложенную 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 мне следует использовать для создания формы, позволяющей задавать неизвестное количество вопросов и ответов. но требовать, чтобы на каждый вопрос был выбран ответ.
Ваша помощь очень ценится.





Структура реактивной формы, которую вы ищете, такова:
FormGroup({
Questions: FormArray([
FormControl(Validators.required),
FormControl(Validators.required),
...
])
})
По сути, вы хотите добавить запись для каждого вопроса в FormArray. Каждая запись состоит из FormControl для группы переключателей. Так что все ответы на вопрос делятся на один FormControl.
Я также сделал пример Plunker на основе ваших требований:
Пример радио-кнопки с вложенной динамической реактивной формой в Angular 6
Вы можете зарегистрировать форму в консоли Plunker и исследовать ее.
Надеюсь это поможет.
Я ценю ваше время и ответ. Я выяснил структуру сегодня утром, прежде чем увидел это. Я считаю, что уход от кода на некоторое время помог моему мыслительному процессу: P
Я понимаю, что мне нужно создать динамическую форму. однако вопрос в том, что такое структура ReactiveForm?