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