Angular 动态表单
原创
开发过程中，表单是最常用处理数据的窗口。其出场率居高不下。每个表单都要去写HTML，CS, JS。还要验证。让本就枯燥繁琐的开发更显无趣。
动态表单功能：
- 不限布局。不限个数。（也可以理解为，一个表单折分成多个表单，数量和位置都不限）
- 左右表单。上下表单。上中下，左右，下下左右。等等。。。。。。都可以。
- 单个表单，多个表单（主表单+多个子表单）
<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）
<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>
怎么使用：
- 在要使用的模块里，导入 DynamicFormModule
- 导入 ControlService
- 实例化控件，生成FormGroup（有多个表单时（主表单+多子表单）只有主表单才生成FormGroup，子表单直接传options）
- 支持自定义模板，支持排序（order）。更可以自己扩展
- 定制。现有控件，只写了下拉框和文本框。根据实际需求。可以扩展更多控件。（本插件样式也是没写的。每个项目的样式都不一样，写了反而影响你们的项目。所以不写）
- 表单使用
代码地址
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
