Question

我正在基于https://angular.io/guide/dynamic-form

的动态表单示例构建表单

我无法在示例＆＃39;文本框＆＃39;旁边找到有关如何设置其他表单元素类型的任何信息。和＆＃39;下拉＆＃39;。他们的代码示例：

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

export class TextboxQuestion extends QuestionBase<string> {
    controlType = 'textbox';
    type: string;

    constructor(options: {} = {}) {
       super(options);
       this.type = options['type'] || '';
    }
}

有一个变量＆＃34; controlType＆＃34;我认为应该能够采取其他价值观。是否有一些我没有找到的文件？或者是否有其他方法可以在动态表单设置中添加textareas，复选框或单选按钮？

Answer 1

您链接指南中的示例只是为您提供了如何创建动态表单的概念。 Angular并没有为此提供现成的解决方案。

您的想法是使用您自己的类型扩展dynamic-form-question.component.html模板。以下是文本区域的示例：

<div [formGroup]="form">
  <!-- ... -->
  <div [ngSwitch]="question.controlType">

    <!-- Your other types here... -->

    <textarea *ngSwitchCase="'textarea'" [formControlName]="question.key"
                                         [id]="question.key">

  </div> 
  <!-- ... -->
</div>

这会为controlType 'textarea'的所有动态类型创建一个textarea元素。正如您在本指南中的示例中所看到的，controlType只是他们称之为question-base.ts的基类的属性

textarea类的简单实现可能如下所示：

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

export class TextareaQuestion extends QuestionBase<string> {
  controlType = 'textarea';

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

然后你只需将它添加到问题数组中：

let questions: QuestionBase<any>[] = [
  // ...
  new TextareaQuestion({
    key: 'myTextarea',
    label: 'My textarea!',
    order: 1
  }),
  // ...
]

Angular 2动态反应形式元素类型

1 个答案: