Угловая 6 вложенная динамическая реактивная форма

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

Ваша помощь очень ценится.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
750
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

вам необходимо создать динамический компонент для отображения списка вопросов

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

Я понимаю, что мне нужно создать динамическую форму. однако вопрос в том, что такое структура ReactiveForm?

Jake 24.06.2018 01:47
Ответ принят как подходящий

Структура реактивной формы, которую вы ищете, такова:

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

По сути, вы хотите добавить запись для каждого вопроса в FormArray. Каждая запись состоит из FormControl для группы переключателей. Так что все ответы на вопрос делятся на один FormControl.

Я также сделал пример Plunker на основе ваших требований:

Пример радио-кнопки с вложенной динамической реактивной формой в Angular 6

Вы можете зарегистрировать форму в консоли Plunker и исследовать ее.

Надеюсь это поможет.

Я ценю ваше время и ответ. Я выяснил структуру сегодня утром, прежде чем увидел это. Я считаю, что уход от кода на некоторое время помог моему мыслительному процессу: P

Jake 24.06.2018 14:52

Другие вопросы по теме