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

Question

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

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

Поскольку я следую подходу ReactiveForm во всем приложении, я подумал о создании FormGroup с аналогичной структурой, предполагая, что это поможет мне легко отобразить выбранный ответ обратно в список. Это поможет отправить вопросник с помощью другого вызова 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));
}

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

Что вы думаете, это идеальный способ справиться с такими ситуациями? Предполагается ли использовать здесь шаблонный подход? Я даже сомневаюсь, что я придерживаюсь правильного подхода, поскольку я новичок в 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
}