Многослойная форма с использованием реактивных форм в Angular 6

Question

Я пытаюсь разработать веб-приложение, которое отображает ряд вопросов для пользователя.Вопросы разделены на основе категорий .Приложение разработано с использованием Angular6.Вопросы выбираются с помощью бэкэнд-сервиса REST.На стороне клиента создается интерфейс, который моделирует структуру ответа REST, которая имеет несколько подынтерфейсов для поддержки сложной внутренней структуры.Ответ будет отображен как Список этого интерфейса.Ниже приводится структура интерфейса.

Мое намерение состоит в том, чтобы выполнить итерацию List<ICategoryQuestion>, отобразить вопросы со всемиопций и заполните selectedAnswer выбранной пользователем опцией.

Поскольку я следую подходу ReactiveForm во всем приложении, я подумал о создании FormGroup спохожая структура, если предположить, что это поможет мне легко отобразить selectedAnswer обратно в список.Это поможет отправить Анкету, используя другой вызов REST, который снова принимает List<ICategoryQuestion>.

Теперь реальная задача здесь - создать FormGroup с аналогичной структурой,Сначала я создал FormGroup, которая содержит все List<ICategoryQuestion>.

mainFormGroup: FormGroup = this.formBuilder.group({
   categoryQuestionList: this.formBuilder.array([]);
});

Теперь мне нужно получить контроль над массивом (categoryQuestionList), а затем заполнить его категориями.

код похож на другой.

let categoryQuestionListControl = <FormArray> this.mainFormGroup.get("categoryQuestionList");

//iterate the **`List<ICategoryQuestion>`** create a FormGroup //representing each ICategoryQuestion and push it to the `categoryQuestionListControl`.

iterate list{
    categoryQuestionListControl.push(this.getCategoryQuestionFormGroup(categoryQuestion));
}

Теперь снова у categoryQuestionFormGroup есть List<IQuestionAnswer>, который снова внутренне содержит массив IOptions сделать код более сложным.

Какой, на ваш взгляд, идеальный способ справиться с подобными ситуациями?Должен ли я использовать Template Driven подход здесь?Я даже сомневаюсь, что я придерживаюсь правильного подхода, поскольку я новичок в Angulat 2 +.

Пожалуйста, посоветуйте.

Answer 1

По моему мнению, группа форм не нужна, вы можете контролировать окончательный вопросник на главном контроллере, например, в режиме мастера.Мой путь как:

let Categories = [{...},...];
let selectedCategory = null;
let categoryQuestions = null;
let questionnaire = null;
wizardManager() {
  if (! selectedCategory) {
    do step1 //popup window allow user choose category, then fill selectedCategory, CategoryQuestions and init questionnaire = {categoryId: id, answers:[]}
  else if (questionnaire.answers.length != categoryQuestions.length) {
    let question = categoryQuestions[questionnaire.answers.length];
    repeat step2 //popup window show question and answers, then save answer to questionnaire.answers
  } else {
    All question answered, submit it.
  }
}
init() {
  wizardManager();
}
popupWindow() {
  openModal, and let modal call wizardManager onDismiss
}