Angular 自定义表单组件

一、动机

在Angular应用中，表单组件是十分常用的，如果说每次使用表单都使用原生标签或者使用组件库NG-ZORRO中的form表单组件进行搭建，效率则会降低很多，所以自己自定义表单组件就显得格外的重要。

二、思路

我们都知道，构造表单的最重要的的东西就是表单项，我们需要哪些数据，这些数据通过什么标签进行收集。比如说姓名，我们就需要一个字段name和一个标签input，因此自定义表单组件需要传入一个fields数组，在数组的每一项告诉组件需要使用的字段和标签。

三、实现

从父组件传入fields数组，表单组件进行接收后就可以开始构建表单，在使用组件库NG-ZORRO的基础上，动态的构建表单。

 /**
     * 构造表单
     */
    private buildForm() {
        const form = new FormGroup({});
       
            // 校验内容构造
            const validList: any[] = [];
            if (field.MUST_INPUT) {
                validList.push(Validators.required);
            }
           
            form.addControl(
                field.TABLE_COLUMN_CODE,
                new FormControl({ value: null, disabled: field.READONLY }, validList)
            );
        });
        this.form = form;
        if (this.disabled) {
            this.form.disable();
        }
    }

使用new FormGroup()创建表单对象，使用validList构造校验内容，使用Validators进行校验，然后使用addControl()方法为表单动态添加字段控制器，通过fields中的MUST_INPUT和READONLY字段可以动态的实现字段是否是必填或者只读，大大提高了灵活性。

除此之外，在页面的构建上，同样可以通过字段进行条件渲染，比如可以通过fields.DICTIONARY_CODE是否为空来标识标签是否需要动态获取数据，从而区分需要获取数据标签和静态标签。在获取数据标签中又可以通过fields.VIEW_TYPE的数据来区分为下拉框组件还是抽屉组件来显示数据。在无需数据标签中同样可以通过字段来区分是使用普通文本框还是数字文本框还是文本域还是日期文本框。通过设置字段简化前端页面的构建，这就是自定义表单组件的关键所在。