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>

終於大工告成，保存一把看看效果吧

篇幅有限，這篇先到這裏吧，咱們在下篇接着把整個實踐作完，