ng-dynamic-forms实践篇(上)

定个小目标

先来定个小目标吧,我们要实现的效果:

动态生成一个表单,里面的字段如下:

字段名称 字段类型 验证 备注
姓名 text 必填,长度小于15
性别 radio button 必填
年龄 number 必填,必须是整数,大于0,小于150
喜欢的颜色 color picker 必填 貌似Kendo没有这个控件,先不做这个
出生年月 date picker 必填
出生时分秒 time picker 必填
密码 password 必填,长度小于15,正则表达式校验复杂度
密码确认 password 必填,必须要和密码一致
学历 select 必填
等级 评分组件 必填 貌似Kendo没有这个控件,先不做这个
兴趣爱好 checkbox 最少选择一个
备注 text area 非必填
头像 文件上传 尝试的做一下

这样应该把里面的组件大部分都列出来了吧,至于UI库,我选用Kendo UI,因为公司内部的项目主要使用的是这个UI库,而我也是带着公司的使命来做这件事儿的,但是因为Kendo中没有Rating和ColorPicker组件,所以暂时放弃那两个字段,感兴趣的朋友可以用别的UI库来实现。

创建项目

这里使用angular CLI来快速的创建一个angualr项目,简单省事儿,命令走起:

ng new --routing dynamic-forms-demo

然后转到刚创建好的angualr项目中,安装各种依赖,具体参考ng-dynamic-forms开源项目的文档,命令走起:

npm install --save @ng-dynamic-forms/core
npm install --save @ng-dynamic-forms/ui-kendo

在安装@ng-dynamic-forms/ui-kendo的时候,发现报了一堆的错误,如下:

大概意思是缺少这些依赖,然后我大概搜了下ng-dynamic-forms的issue,有一个issue与这个问题类似,作者的回答是“You need to manually install the peer dependency angular2-text-mask”,也就是说,我们需要手动去安装这些标红的错误项(并没有理解作者为什么不让这些类库自动安装)。

https://github.com/udos86/ng-dynamic-forms/issues/394

那我们继续安装之旅,一个个安装太费劲了,安装多个包时,可以将多个包中间用空格分隔,一次性就全安装了,像下面这样:

npm i --save @progress/kendo-angular-dateinputs @progress/kendo-angular-dropdowns @progress/kendo-angular-inputs @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-angular-popup @progress/kendo-angular-resize-sensor @progress/kendo-angular-upload @progress/kendo-date-math @progress/kendo-popup-common @progress/kendo-theme-default @telerik/kendo-intl

安装完了之后,我们这时候就可以npm start,看看效果了。

npm start执行完成后,手动再浏览器中打开http://localhost:4200/,你能看到一个angular的初始化页面,此处无图~

创建页面

上面我们定义了一个简单的angualr的基础项目,并且把我们需要的包都导入进来了,接下来, 我们需要创建一个用于写demo的页面,当然,如果你比较懒,可以直接在默认生成的app.component里面写也是没有什么问题的~

首先生成一个kendo-ui component

ng g component kendo-ui

然后你如果不喜欢,可以到app.component.html里面把一堆没有用的html标签干掉,留个<router-outlet></router-outlet>就好了

接下来,我们需要在app-routing.modules.ts中,定义刚刚生成的Component的路由地址,将类中routes对象的定义修改为如下,并import相应的模块:

const routes: Routes = [
{path: 'kendo', component: KendoUiComponent}
];

此时,访问http://localhost:4200/kendo,你就可以看到 kendo-ui works! 的字样,说明页面已经创建好了。

导入ng-dynamic-forms相关模块

打开app.modules.ts文件,在文件最上方导入ng-dynamic-forms的相关模块:

import {DynamicFormsKendoUIModule} from '@ng-dynamic-forms/ui-kendo';
import {DynamicFormsCoreModule} from '@ng-dynamic-forms/core';

然后在imports中导入DynamicFormsCoreModule 和 DynamicFormsKendoUIModule,导入完成后代码如下,高亮部分时新增加的代码:

@NgModule({
declarations: [
AppComponent,
KendoUiComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule, // 文件上传需要用到
ReactiveFormsModule,
BrowserAnimationsModule,
DynamicFormsCoreModule.forRoot(),
DynamicFormsKendoUIModule
],
providers: [],
bootstrap: [AppComponent]
})

另外,需要在项目根目录的.angular-cli.json中,找到app节点下面的styles节点,并导入kendoUI的css,代码如下:

"styles": [
"styles.css",
"../node_modules/@progress/kendo-theme-default/dist/all.css"
]

添加第一个控件

接下来,我们在动态的创建第一个控件吧~

首先,在我们项目中刚创建的kendo-ui文件中,新建一个kendo-sample-form.component.ts文件,定义一个变量并初始化如下:

formModel: DynamicFormControlModel[] = [
new DynamicInputModel({
id: 'firstName',
label: '姓名',
placeholder: '请输入用户姓名'
})
];

然后在构造函数中注入DynamicFormService,并在ngOnInit钩子中使用DynamicFormService初始化表单,完整的代码如下:

  1 import {Component, OnInit} from '@angular/core';
2 import {
3 DynamicFormControlModel,
4 DynamicFormService,
5 DynamicInputModel
6 } from '@ng-dynamic-forms/core';
7 import {FormGroup} from '@angular/forms';
8
9 @Component({
10 selector: 'app-kendo-ui',
11 templateUrl: './kendo-ui.component.html',
12 styleUrls: ['./kendo-ui.component.css']
13 })
14 export class KendoUiComponent implements OnInit {
15
16 formModel: DynamicFormControlModel[] = [
17 new DynamicInputModel({
18 id: 'firstName',
19 label: '姓名',
20 placeholder: '请输入用户姓名'
21 })
22 ];
23
24 formGroup: FormGroup;
25
26 constructor(private formService: DynamicFormService) {
27 }
28
29 ngOnInit() {
30 this.formGroup = this.formService.createFormGroup(this.formModel);
31 }
32
33 }
34

kendo-ui.component.ts

然后在kendo-ui.component.html中,使用dynamic-kendo-form初始化表单,具体代码如下:

  1 <div class="content-margin" style="width: 50%;">
2 <form [formGroup]="formGroup" class="k-form">
3 <dynamic-kendo-form [group]="formGroup"
4 [model]="formModel">
5 </dynamic-kendo-form>
6 </form>
7 <pre>{{formGroup.value | json}}</pre>
8 </div>

终于大工告成,保存一把看看效果吧

篇幅有限,这篇先到这里吧,我们在下篇接着把整个实践做完,

Angular动态表单生成(三)的更多相关文章

  1. Angular动态表单生成(一)

    好久不写博客了,手都生了,趁着最近老大让我研究动态表单生成的时机,撸一发博客~~ 开源项目比较 老大丢给我了两个比较不错的开源的动态表单生成工具,这两个项目在github上的star数量基本持平: h ...

  2. Angular动态表单生成(八)

    动态表单生成之拖拽生成表单(下) 我们的动态表单,最终要实现的效果与Form.io的在线生成表单的效果类似,可以参考它的demo地址:https://codepen.io/travist/full/x ...

  3. Angular动态表单生成(七)

    动态表单生成之拖拽生成表单(上) 这个功能就比较吊炸天了,之前的六篇,都是ng-dynamic-forms自带的功能,可能很多的说明官方的文档都已经写了,我只是个搬运工,而在这篇文章中,我将化身一个工 ...

  4. Angular动态表单生成(五)

    动态表单生成之布局 到上面的篇章为止,我们已经把表单比较完整的生成出来了,也实现了一些验证功能,可以说,我们截止这里,就已经可以满足我们的大部分表单生成需求了~ 但是: 目前来说,我们对于表单的布局只 ...

  5. Angular动态表单生成(二)

    ng-dynamic-forms源码分析 在两个开源项目中,ng-dynamic-forms的源码相较于form.io,比较简单,所以我还勉强能看懂,下面就我自己的理解进行简单分析,若有不对的地方,请 ...

  6. Angular动态表单生成(六)

    动态表单之根据Json生成表单 我们在实际的使用中,动态表单往往是由服务器端的一系列配置,然后返回数据给客户端,最后客户端根据数据来动态的生成表单.那么怎么像我们上面所描述的这样,生成一个可以让我们的 ...

  7. Angular动态表单生成(四)

    ng-dynamic-forms实践篇(下) 我们接着上篇,先把小目标中的所有字段都定义出来 这部分就是苦力活儿了,把KendoUiComponent中的formModel完善即可: formMode ...

  8. form-create 3.0 版本发布,好用的Vue3版本动态表单生成组件

    form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持2个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂 ...

  9. Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

    Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...

随机推荐

  1. js在ie6下的一个bug—未结束标签的错误

    在IE6下,如果在body标签没结束前,用代码获取body对象就会出现错误.如: <html> <head> <script type="text/javasc ...

  2. c# 圆上坐标点

    var x=-33204.0924438;  //圆心x var y=-9512.41208658; //圆心y var r=1000;//半径 var angle=30;//角度 var tmpX ...

  3. Angular进阶教程一

    6 AngularJS进阶 6.1数据绑定原理研究 Angular用户都想知道数据绑定是怎么实现的.你可能会看到各种各样的词汇:$watch.$apply.$digest.dirty-checking ...

  4. React 入门实例教程[阮一峰的网络日志] (分享)

    作者: 阮一峰 https://github.com/ruanyf/react-demos 转自:http://www.ruanyifeng.com/blog/2015/03/react.html 对 ...

  5. Servlet - Reasource loading

    1. Load db3.properties String path = this.getServletContext().getRealPath("/WEB-INF/classes/db/ ...

  6. 怎样修复grub开机引导(grub rescue)

    很多时候,特别是在linux调整分区后,开机重启时会出现         error : unknow filesystem         grub rescue>         的字样,系 ...

  7. maven(18)-mybatis generator插件

     generator的作用 使用mybatis框架,在初始项目或修改数据库时,相应的要在JAVA项目中去写一些数据模型文件,DAO,映射XML等配置,而这个插件的作用就是自动生成这些文件,以节省大 ...

  8. Django路由系统---django重点之url传递一个默认参数

    django重点之url传递一个默认参数 可以利用这个特性,让2个URL映射一个函数,但是返回2个不同的HTML url(r'default_param1', views.def_param,), u ...

  9. Linu下的Mysql学习详解_【all】

    Linux下Mysql简介 1.什么是Mysql(MariDB) 1.数据库:存储数据的仓库    2.关系型数据库:mysql(主流用5.5,5.6), oracle        本质:二维表   ...

  10. js获取鼠标坐标位置兼容多个浏览器

    这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...