Question

如何使用angular.io文档中的方式制作嵌套表单：

https://stackblitz.com/angular/pbdkbbnmrdg

目标是在子窗体组中的question.service.ts中有两个DropdownQuestion，名为“ details”，其他现在都在父窗体中……所以最后看起来像这样：

{
    "firstName":"Bembasto",
    "email":"something@email.com",
    "details": {
      "dropdown1":{

      },
      "dropdown2":{

      }
    }
}

Answer 1

Uros，您需要了解代码如何创建FormGroup以及如何创建输入。

我们有一个过去很复杂的对象

创建表单
显示输入内容

首先，我们将创建一种新型的控制问题组

import { QuestionBase } from './question-base';

export class GroupQuestion extends QuestionBase<string> {
  controlType = 'group';
  type: string;

  constructor(options: {} = {}) {
    super(options);
  }
}

并在问题库中添加新属性

questions:any[];
//and change the constructor to allow give value
constructor(options: {
      value?: T,
      ...
      questions?:any[]
    } = {}) {
    this.value = options.value;
    ...
    this.questions = options.questions || [];
  }

看看代码如何创建表单。它在question-control.service中完成。将功能更改为toFormGroup以考虑typeControl“ group”

toFormGroup(questions: QuestionBase<any>[] ) {
    let group: any = {};

    questions.forEach(question => {
      group[question.key] =  (question.controlType=='group')?
      this.toFormGroup(question.questions)
      :question.required ? new FormControl(question.value || '', Validators.required)
                                              : new FormControl(question.value || '');
    });
    return new FormGroup(group);
  }

是的，我们正在使用递归函数。我们的想法是，我们将有一个问题对象，例如

let questions: QuestionBase<any>[] = [
  new DropdownQuestion({
    ...
  }),
  new TextboxQuestion({
    ...
  })
  , new GroupQuestion(
    {
      key: 'details',
      label: 'Details',
      order: 2,
      questions: [
        new TextboxQuestion({
            ...
        }),
        new DropdownQuestion({
            ...
        })
      ]
    }
  )
];

好吧，有了这些更改，我们仍然如何创建formGroup，但是如何显示输入？之前，我们将更改dinamic-form-component，以允许将“ form”作为参数传递

  @Input() form: FormGroup;
  subGroup:boolean=true;

  ngOnInit() {
    if (!this.form)
    {
      this.form = this.qcs.toFormGroup(this.questions);
      this.subGroup=false;
    }
  }

我们添加一个新属性“ subGroup”以指示是否为子组。因此，我们可以隐藏“提交”按钮。

最后，我们将dynamic-form-question.component.html更改为考虑“组问题”

<div [formGroup]="form">
  <label [attr.for]="question.key">{{question.label}}</label>

  <div [ngSwitch]="question.controlType">
    <input *ngSwitchCase="'textbox'" ...>
    <select *ngSwitchCase="'dropdown'" ...>
    </select>

    <div *ngSwitchCase="'group'" [formGroupName]="question.key">
       <app-dynamic-form [form]="form.get(question.key)"
           [questions]="question.questions"></app-dynamic-form>
    </div>
  </div> 

  <div  class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>

</div>

是的，如果我们有一个小组问题，我们会以“ form.get（question.key）”的形式显示一个app-dinamic-form传递。这就是我们更改dinamic-form-component的原因：允许传递formGroup，并且仅在不传递值的情况下才创建新表单。

此stackblitz中的完整示例

注意：就我个人而言，我不喜欢该组件创建formGroup。我喜欢在main.component中创建formGroup并作为参数传递

this other stackblitz中的

探索这一想法。该应用程序组件具有ngOnInit，可进行两次调用

ngOnInit()
  {
    this.questions = this.service.getQuestions();
    this.form=this.qcs.toFormGroup(this.questions);
  }

我们需要手动赋予动态形式的属性“ subGroup”

角嵌套动态形式

1 个答案: