在 Angular 6 中使用反应形式的多层形式 [英] Multi-layer form using Reactive forms in Angular 6

问题描述

我正在尝试开发一个 Web 应用程序，该应用程序向用户显示一组问题.问题根据类别分开.该应用程序是使用 Angular6 开发的.使用后端 REST 服务获取问题.在客户端创建一个接口来模拟 REST 响应结构，它有几个子接口来支持复杂的内部结构.响应将被映射为该接口的列表.以下是界面的结构.

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.

我的目的是迭代List，显示带有所有选项的问题，并用选择的选项填充selectedAnswer用户.

因为我在整个应用程序中都遵循 ReactiveForm 方法，所以我想创建一个具有类似结构的 FormGroup，假设它可以帮助我轻松地将 selectedAnswer 映射回来到列表.这将有助于使用另一个 REST 调用提交问卷，该调用再次接受 List.

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>.

现在真正的挑战是创建一个具有相似结构的FormGroup.起初我创建了一个 FormGroup 来保存整个 List.

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([]);
});

现在我必须获得数组的控制权(categoryQuestionList)，然后向其中填充类别.

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

代码类似.

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，它再次在内部保存了一个IOptions 数组，这将使代码更加复杂.

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

您认为处理此类情况的理想方式是什么?我想在这里使用模板驱动方法吗?我什至怀疑我是否遵循了正确的方法，因为我是 Angulat 2+ 的新手.

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+.

请多多指教.

推荐答案

在我看来表单组是不必要的，你可以在主控制器控制最终的问卷，就像向导模式一样.我喜欢的方式:

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
}

这篇关于在 Angular 6 中使用反应形式的多层形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！