Multi-layer form using Reactive forms in Angular 6

问题

I am trying to develop a web application, which displays a set of questions to the user. Questions are segregated based on Categories. The application is developed using Angular6. Questions are fetched using the backend REST service. An interface is created on the client side which mocks the REST response structure, which has several subinterfaces to back the complex internal structure. The response will be mapped as a List of this interface. Following is the structure of the interface.

My intention is to iterate the List<ICategoryQuestion>, display the questions with all options and populate the selectedAnswer with the option selected by the user.

Since I am following a ReactiveForm approach throughout the application, I thought of creating a FormGroup with a similar structure assuming that it will help me to easily map the selectedAnswer back to the List. This will help to submit the Questionnaire using another REST call which again accepts a List<ICategoryQuestion>.

Now the real challenge here is to create a FormGroup with similar structure. At first I created a FormGroup that holds the entire List<ICategoryQuestion>.

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

Now I have to get the control of the array (categoryQuestionList) and then populate the categories to it.

code is something similar.

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));
}

Now again categoryQuestionFormGroup has a List<IQuestionAnswer>, which again internally holds an array of IOptions will make the code more complex.

What you think is the ideal way of handling these kind of situations? Am I suppose to use Template Driven approach here? I even doubt if I am following the right approach as I am novice to Angulat 2+.

Kindly advise.

回答1:

In my think the form group is unnecessary, you can control the final Questionnaire at main controller, like the wizard mode. My way like:

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
}

来源：https://stackoverflow.com/questions/54016062/multi-layer-form-using-reactive-forms-in-angular-6

标签

angular

typescript

angular-reactive-forms

angular-template-form