Angular动态表单使用

使用动态表单目的就是不用去手动编写太多的HTML代码，设置好之后就由数据的多少以及类型来动态生成表单，提高效率。在Angular的官网中介绍动态表单时，夹杂了一些业务方面的东西，增加了不熟悉的人学习的难度，这里直接就是为了演示怎么产生和使用动态表单。
使用动态表单时，有可能需要input类型、textarea类型或者其他表单类型等，在拿到数据构建相关控件时，需要制定一些基本的东西，比如控件类型、值等。

首先创建一个基类，这个看自己的需要，要不要基类都是自己选择，这里直接拿官网的一些配置

//基类
export class BaseControl<T>{
    value: T;
    key: string;
    label: string;
    required: boolean;
    order: number;
    controlType: string;
    placeholder: string;

    constructor(options: {
        value?: T,
        key?: string,
        label?: string,
        required?: boolean,
        order?: number,
        controlType?: string,
        placeholder?: 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 || '';
        this.placeholder = options.placeholder || '';
    }
}

创建子控件类

//textarea类
export class TextArea extends BaseControl<string>{
    controlType = "textarea";
    rows: number;
    constructor(options: {} = {}) {
        super(options);
        this.rows = options['rows'] || 1;
    }
}

//input类，默认文本类型
export class TextBox extends BaseControl<string>{
    controlType = "textbox";
    type: string;
    constructor(options: {} = {}) {
        super(options);
        this.type = options["type"] || "";
    }
}

然后构建控件

export class DynamicFromComponent implements OnInit {

  constructor() { }

  form:FormGroup;
  controls:BaseControl<any>[];
  ngOnInit() {
    this.controls=this.createControls();
    this.form=this.toFromGroup(this.controls);
  }
  //构建控件，如果需要放一些默认数据以及其他的验证都在这里进行
  createControls() {
    return [
      new TextArea({
        placeholder: "地方描述，最多120字。",
        rows: 3,
        key:"desc1"
      }),
      new TextArea({
        placeholder: "路线描述，最多120字。",
        rows: 3,
        key:"desc2"
      }),
      new TextBox({
        placeholder: "用户名",
        value:"张三",
        key:"userName"
      })
    ]
  }
  //循环控件加到formgroup上
  toFromGroup(controls:BaseControl<any>[]){
    let group: any = {};
    controls.forEach(item => {
      //这个是要绑到formControlName上的值，如果都不设置具体名称的话，
      //最后提交拿到只有最后改变的那个控件的值，我这写的和官网上的不一样
      //我这里是一种投机行为
      group[item.key] = new FormControl(item.key || "");
    });
    return new FormGroup(group);
  }

  onSubmit(){
  	//这里是提交时获取到的所有表单数据，如果都不填获取的是默认的值
    console.log(this.form.value);
  }

}

前台使用

<form (ngSubmit)="onSubmit()" [formGroup]="form">
  <div *ngFor="let item of controls">
    <div [ngSwitch]="item.controlType">
      <!--通过判断类型来显示哪种表单-->
      <input *ngSwitchCase="'textbox'" [type]="item.type" value="{{item.value}}" [formControlName]="item.key"
        placeholder="{{item.placeholder}}">
      <textarea *ngSwitchCase="'textarea'" value="{{item.value}}" rows="{{item.rows}}" [formControlName]="item.key"
        placeholder="{{item.placeholder}}"></textarea>
    </div>
  </div>
  <button type="submit">保存</button>
</form>

结果