代码之家 › 专栏 › 技术社区 › Renjith

使用角6中的反应形式的多层形式

angular-template-form angular-reactive-forms typescript angular

0

Renjith · 技术社区 · 6 年前

我正在尝试开发一个web应用程序,它向用户显示一组问题。问题是根据类别 . 应用程序是使用angular6开发的。使用后端rest服务获取问题。在客户端创建一个接口,该接口模拟rest响应结构,rest响应结构有多个子接口来支持复杂的内部结构。响应将映射为表这个界面。下面是接口的结构。

我的目的是重复 List<ICategoryQuestion> ,显示包含所有选项的问题并填充 选择应答器 由用户选择的选项。

由于我在整个应用程序中都遵循一种反应式方法,所以我想创建一个 形式群 有一个类似的结构,假设它可以帮助我轻松地映射 选择应答器 回到名单上。这将有助于使用另一个rest调用提交问卷,该调用再次接受 列表<ICategoryQuestion> .

现在真正的挑战是 形式群 结构相似。起初我创建了一个表单组,它包含 列表<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> ,它在内部保存一个数组 i期权 会使代码更复杂。

你认为处理这种情况的理想方法是什么?我应该用 模板驱动 靠近这里?我甚至怀疑我是否遵循正确的方法,因为我是2+语言初学者。

请告知。

1 回复 | 直到 6 年前

1

0

Nick Wang 6 年前

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

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
}