在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<ICategoryQuestion> ，显示带有所有选项的问题，并使用用户选择的选项填充 selectedAnswer .

由于我在整个应用程序中都遵循ReactiveForm方法，因此我考虑创建具有类似结构的 FormGroup ，假设这将帮助我轻松地将 selectedAnswer 到列表.这将有助于使用另一个再次接受 List<ICategoryQuestion> 的REST调用来提交问卷.

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

现在，我必须控制数组(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<IQuestionAnswer> ，它再次在内部保存了一个 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屋！