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>

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

篇幅有限，这篇先到这里吧，咱们在下篇接着把整个实践作完，