Angular动态表单生成(三)
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动态表单生成(三)的更多相关文章
- Angular动态表单生成(一)
好久不写博客了,手都生了,趁着最近老大让我研究动态表单生成的时机,撸一发博客~~ 开源项目比较 老大丢给我了两个比较不错的开源的动态表单生成工具,这两个项目在github上的star数量基本持平: h ...
- Angular动态表单生成(八)
动态表单生成之拖拽生成表单(下) 我们的动态表单,最终要实现的效果与Form.io的在线生成表单的效果类似,可以参考它的demo地址:https://codepen.io/travist/full/x ...
- Angular动态表单生成(七)
动态表单生成之拖拽生成表单(上) 这个功能就比较吊炸天了,之前的六篇,都是ng-dynamic-forms自带的功能,可能很多的说明官方的文档都已经写了,我只是个搬运工,而在这篇文章中,我将化身一个工 ...
- Angular动态表单生成(五)
动态表单生成之布局 到上面的篇章为止,我们已经把表单比较完整的生成出来了,也实现了一些验证功能,可以说,我们截止这里,就已经可以满足我们的大部分表单生成需求了~ 但是: 目前来说,我们对于表单的布局只 ...
- Angular动态表单生成(二)
ng-dynamic-forms源码分析 在两个开源项目中,ng-dynamic-forms的源码相较于form.io,比较简单,所以我还勉强能看懂,下面就我自己的理解进行简单分析,若有不对的地方,请 ...
- Angular动态表单生成(六)
动态表单之根据Json生成表单 我们在实际的使用中,动态表单往往是由服务器端的一系列配置,然后返回数据给客户端,最后客户端根据数据来动态的生成表单.那么怎么像我们上面所描述的这样,生成一个可以让我们的 ...
- Angular动态表单生成(四)
ng-dynamic-forms实践篇(下) 我们接着上篇,先把小目标中的所有字段都定义出来 这部分就是苦力活儿了,把KendoUiComponent中的formModel完善即可: formMode ...
- form-create 3.0 版本发布,好用的Vue3版本动态表单生成组件
form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持2个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂 ...
- Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...
随机推荐
- js在ie6下的一个bug—未结束标签的错误
在IE6下,如果在body标签没结束前,用代码获取body对象就会出现错误.如: <html> <head> <script type="text/javasc ...
- c# 圆上坐标点
var x=-33204.0924438; //圆心x var y=-9512.41208658; //圆心y var r=1000;//半径 var angle=30;//角度 var tmpX ...
- Angular进阶教程一
6 AngularJS进阶 6.1数据绑定原理研究 Angular用户都想知道数据绑定是怎么实现的.你可能会看到各种各样的词汇:$watch.$apply.$digest.dirty-checking ...
- React 入门实例教程[阮一峰的网络日志] (分享)
作者: 阮一峰 https://github.com/ruanyf/react-demos 转自:http://www.ruanyifeng.com/blog/2015/03/react.html 对 ...
- Servlet - Reasource loading
1. Load db3.properties String path = this.getServletContext().getRealPath("/WEB-INF/classes/db/ ...
- 怎样修复grub开机引导(grub rescue)
很多时候,特别是在linux调整分区后,开机重启时会出现 error : unknow filesystem grub rescue> 的字样,系 ...
- maven(18)-mybatis generator插件
generator的作用 使用mybatis框架,在初始项目或修改数据库时,相应的要在JAVA项目中去写一些数据模型文件,DAO,映射XML等配置,而这个插件的作用就是自动生成这些文件,以节省大 ...
- Django路由系统---django重点之url传递一个默认参数
django重点之url传递一个默认参数 可以利用这个特性,让2个URL映射一个函数,但是返回2个不同的HTML url(r'default_param1', views.def_param,), u ...
- Linu下的Mysql学习详解_【all】
Linux下Mysql简介 1.什么是Mysql(MariDB) 1.数据库:存储数据的仓库 2.关系型数据库:mysql(主流用5.5,5.6), oracle 本质:二维表 ...
- js获取鼠标坐标位置兼容多个浏览器
这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...