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初始化表單，完整的代碼如下：

import {Component, OnInit} from '@angular/core';
import {
  DynamicFormControlModel,
  DynamicFormService,
  DynamicInputModel
} from '@ng-dynamic-forms/core';
import {FormGroup} from '@angular/forms';

@Component({
  selector: 'app-kendo-ui',
  templateUrl: './kendo-ui.component.html',
  styleUrls: ['./kendo-ui.component.css']
})
export class KendoUiComponent implements OnInit {

  formModel: DynamicFormControlModel[] = [
    new DynamicInputModel({
      id: 'firstName',
      label: '姓名',
      placeholder: '請輸入用戶姓名'
    })
  ];

  formGroup: FormGroup;

  constructor(private formService: DynamicFormService) {
  }

  ngOnInit() {
    this.formGroup = this.formService.createFormGroup(this.formModel);
  }

}

然后在kendo-ui.component.html中，使用dynamic-kendo-form初始化表單，具體代碼如下：

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

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

篇幅有限，這篇先到這里吧，我們在下篇接着把整個實踐做完，