angular学习之动态创建表单的方法

import { ReactiveFormsModule } from \'@angular/forms\';
@NgModule({
 imports: [
  ReactiveFormsModule
 ]
})

export class Question <T> {
  value: T;//表单元素的值
  key: string;//表单元素键的名称
  label: string;//输入元素的标题
  required: boolean;//是否必输
  order: number;//排序
  controlType: string;//表单的类型 选择框/文本输入框

  constructor(options: {
    value?: T,
    key?: string,
    label?: string,
    required?: boolean,
    order?: number,
    controlType?: string
  } = {}) {
    this.value = options.value;
    this.key = options.key || \'\';
    this.label = options.label || \'\';
    this.required = !!options.required;
    this.order = options.order === undefined ? 1 : options.order;
    this.controlType = options.controlType || \'\';
  }
}

import { Question  } from \'./question- \';

export class Questi down extends Question <string>{
  controlType = \"dropdown\";
  options: { key: string, value: string }[] = [];

  constructor(options: {} = {}) {
    super(options);
    this.options = options[\"options\"] || [];
  }
}

import { Question  } from \'./question- \';

export class QuestionTextbox extends Question <string> {
  controlType = \"textbox\";
  type:string;
  constructor(options:{} ={}){
    super(options);
    this.type = options[\"type\"]||\"\"
  }
}

 getQuestions(){
  let questions:Question <any>[]=[
   new Questi down({
    key:\'brave\',
    label:\'Bravery Rating\',
    options:[
     {key:\'solid\',value:\'Solid\'},
     {key:\'great\',value:\'Great\'},
     {key:\'good\',value:\'Good\'},
     {key:\'unproven\',value:\'Unproven\'}
    ],
    order:3
   }),
   new QuestionTextbox({
    key:\'firstName\',
    label:\'First name\',
    value:\"Bombasto\",
    required:true,
    order:1
   }),
   new QuestionTextbox({
    key:\'emailAddress\',
    label:\"Email\",
    type:\'email\',
    order:2
   })
  ];
  return questions.sort((a, b) => a.order - b.order);
 }

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

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

<div [formGroup]=\"form\">
 <label [attr.for]=\"question.key\">{{question.label}}</label>
 <div [ngSwitch]=\"question.controlType\">
  <input *ngSwitchCase=\"\'textbox\'\" [formControlName]= \"question.key\" 
  [id]=\"question.key\" [type]=\"question.type\">
  <select [id]=\"question.key\" *ngSwitchCase=\"\'dropdown\'\"
   [formControlName]=\"question.key\">
   <option *ngFor=\"let opt of question.options\" [value]=\"opt.key\">
    {{opt.value}}
   </option>
  </select>
 </div>
 <div class=\"errorMessage\" *ngIf=\"!isValid\">
  {{question.label}} is required
 </div>
</div>

import { Component, OnInit, Input } from \'@angular/core\';
import {FormGroup} from \'@angular/forms\';

import {Question } from \'../question- \';

@Component({
 selector: \'app-dynamic-form-question\',
 templateUrl: \'./dynamic-form-question.component.html\',
 styleUrls: [\'./dynamic-form-question.component.less\']
})
export class DynamicFormQuestionComponent implements OnInit {
 @Input() question:Question <any>;
 @Input() form :FormGroup;
 get isValid(){
  return this.form.controls[this.question.key].valid;
 }
 constructor() { }

 ngOnInit() {
 }

}

  <div *ngFor=\"let question of questions\" class=\"form-row\">
   <app-dynamic-form-question [question]=\"question\" [form]=\"form\"></app-dynamic-form-question>
  </div>