Angular 动态表单

开发过程中，表单是最常用处理数据的窗口。其出场率居高不下。每个表单都要去写HTML，CS, JS。还要验证。让本就枯燥繁琐的开发更显无趣。

动态表单功能：

不限布局。不限个数。（也可以理解为，一个表单折分成多个表单，数量和位置都不限）
1. 左右表单。上下表单。上中下，左右，下下左右。等等。。。。。。都可以。
2. 单个表单，多个表单（主表单多个子表单）

代码语言：javascript复制

        <div class="row ">
            <div class="col-xs-5 border form-1">
                <span>表单1</span>
                <div dynamic-sub-form [options]="options" [form]="form" name="subform2" (onChange)="getValue1($event)"></div>
                <div class="border no-margin">
                    <span>表单2</span>
                    <div dynamic-sub-form [options]="options" [form]="form" name="subform1" (onChange)="getValue1($event)"></div>
                </div>
            </div>
            <div class="col-xs-5 border form-2">
                <span>表单3</span>
                <div dynamic-sub-form [options]="options" [form]="form" name="subform" (onChange)="getValue1($event)"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-8 border form-3">
                <span>表单4</span>
                <!-- <a dynamic-form [options]="options" [(ngModel)]="formValue" [form]="form" (onChange)="getValue($event)"></a> -->
                <dynamic-form [options]="options" [(ngModel)]="formValue" [form]="form" (onChange)="getValue($event)"></dynamic-form>
            </div>
           
        </div>

表单验证。必要字段验证。还要处理错误消息
聚焦。（上一项输入完成，想直接聚焦下一项）
把表单当成一个表单元素使用。直接支持双向绑定（ngModel，formControlName）

代码语言：javascript复制

<a dynamic-form [options]="options" [(ngModel)]="formValue" [form]="form" (onChange)="getValue($event)"></a>
<dynamic-form [options]="options" [(ngModel)]="formValue" [form]="form" (onChange)="getValue($event)"></dynamic-form>