Angular動態表單生成（四）

時間 2019-12-08

原文原文鏈接

ng-dynamic-forms實踐篇（下）

咱們接着上篇，先把小目標中的全部字段都定義出來git

這部分就是苦力活兒了，把KendoUiComponent中的formModel完善便可：github

  1   formModel: DynamicFormControlModel[] = [
  2     new DynamicInputModel({
  3       id: 'firstName',
  4       label: '姓名',
  5       placeholder: '請輸入用戶姓名'
  6     }),
  7     new DynamicRadioGroupModel({
  8       id: 'sex',
  9       legend: '性別',
 10       options: [
 11         {
 12           label: '男',
 13           value: 'M'
 14         },
 15         {
 16           label: '女',
 17           value: 'F'
 18         }
 19       ]
 20     }),
 21     new DynamicInputModel({
 22       id: 'age',
 23       inputType: 'number',
 24       label: '年齡',
 25       placeholder: '請輸入用戶年齡',
 26       min: 0,
 27       max: 150,
 28       step: 1,
 29       value: 18
 30     }),
 31     new DynamicDatePickerModel({
 32       id: 'birthday-date',
 33       inline: false,
 34       label: '出生日期',
 35       placeholder: '請選擇出生日期'
 36     }),
 37     new DynamicTimePickerModel({
 38       id: 'birthday-time',
 39       label: '出生時分',
 40       format: 'HH:mm'
 41     }),
 42     new DynamicInputModel({
 43       id: 'password',
 44       inputType: 'password',
 45       label: '密碼',
 46       placeholder: '請輸入用戶密碼'
 47     }),
 48     new DynamicInputModel({
 49       id: 'password-confirm',
 50       inputType: 'password',
 51       label: '確認密碼',
 52       placeholder: '請再次輸入用戶密碼'
 53     }),
 54     new DynamicSelectModel({
 55       id: 'education',
 56       label: '學歷',
 57       options: [
 58         {
 59           label: '大學',
 60           value: 'university'
 61         },
 62         {
 63           label: '高中',
 64           value: 'high-school'
 65         },
 66         {
 67           label: '初中',
 68           value: 'junior-school'
 69         },
 70       ]
 71     }),
 72     new DynamicCheckboxGroupModel({
 73       id: 'favorite',
 74       legend: '興趣愛好',
 75       group: [
 76         new DynamicCheckboxModel({
 77           id: 'play-games',
 78           label: '打遊戲'
 79         }),
 80         new DynamicCheckboxModel({
 81           id: 'coding',
 82           label: '寫代碼'
 83         }),
 84         new DynamicCheckboxModel({
 85           id: 'running',
 86           label: '跑步'
 87         }),
 88       ]
 89     }),
 90     new DynamicTextAreaModel({
 91       id: 'remark',
 92       label: '備註',
 93       rows: 10
 94     }),
 95     new DynamicFileUploadModel({
 96       autoUpload: true,
 97       id: 'attachments',
 98       label: 'Attachments',
 99       multiple: true,
100       removeUrl: 'removeUrl',
101       url: 'saveUrl'
102     }),
103     new DynamicFileUploadModel(
104       {
105         id: 'head-photo',
106         label: '頭像',
107         accept: '*.*',
108         autoUpload: true,
109         multiple: true,
110         removeUrl: 'removeUrl',
111         url: 'http://localhost:60155/api/file/upload'
112       }
113     )
114   ];

formModel

這裏的各類控件模型的初始化，能夠查看DynamicXXXXModel的屬性定義，也能夠參考官方github裏面的examples：https://github.com/udos86/ng-dynamic-forms/blob/master/sample/app/ui-kendo/kendo-sample-form.model.ts。正則表達式

接下來，咱們再嘗試加一下驗證相關的代碼：api

驗證分兩類，一類是系統內置的驗證，好比非空驗證、最大長度、最大值、正則表達式之類的，另一類是自定義的驗證邏輯，下面咱們分別來看看怎麼用吧~app

系統內置驗證

這個用起來比較簡單，直接在模型上加上validators屬性和errorMessages屬性便可,以下代碼：ide

new DynamicInputModel({
      id: 'firstName',
      label: '姓名',
      placeholder: '請輸入用戶姓名',
      validators: {
        required: null,
        maxLength: 15
      },
      errorMessages: {
        required: '{{label}}不能爲空',
        maxLength: '{{label}}不能超過15個字符'
      }
    })

其中validators中定義了你須要作哪些驗證，以及這些驗證方法須要傳遞的參數是什麼。errorMessages中定義了當錯誤發生時的錯誤消息。最終效果以下：ui

自定義驗證

有時候，系統驗證不徹底能知足咱們的需求，此時須要本身定義一些驗證的方法。好比，咱們須要在用戶註冊時，檢查用戶兩次輸入的密碼是否一致。url

在使用時，首先咱們須要定義一個驗證的方法，代碼以下，該方法中，會將password和password-confirm從表單中取出，並得到value，若是他們兩個的Value不一致，則返回對象：{customMatchPasswordValidator: true}spa

import {AbstractControl, FormGroup, ValidationErrors} from '@angular/forms';


export function customMatchPasswordValidator(group: FormGroup): ValidationErrors | null {

  console.log(group);
  console.log(group.get('password'));
  const password = group.get('password').value,
    passWordConfirm = group.get('password-confirm').value;

  const hasError = password != passWordConfirm;

  return hasError ? {customMatchPasswordValidator: true} : null;
}

而後在app.modules.ts中導入它：3d

import {customMatchPasswordValidator} from './kendo-ui/password-validation';

還須要在app.modules.ts的providers中注入：

providers: [
    {
      provide: NG_VALIDATORS,
      useValue: customMatchPasswordValidator,
      multi: true
    },
    {
      provide: DYNAMIC_VALIDATORS,
      useValue: new Map<string, Validator | ValidatorFactory>([
        ['customMatchPasswordValidator', customMatchPasswordValidator]
      ])
    }
  ]

因爲是要同時獲取兩個控件的值，因此須要將兩個密碼框的模型放到一個DynamicFormGroupModel中，而且咱們的驗證也須要加到DynamicFormGroupModel中，代碼以下：

new DynamicFormGroupModel({
      id: 'password-group',
      group: [
        new DynamicInputModel({
          id: 'password',
          inputType: 'password',
          label: '密碼',
          placeholder: '請輸入用戶密碼'
        }),
        new DynamicInputModel({
          id: 'password-confirm',
          inputType: 'password',
          label: '確認密碼',
          placeholder: '請再次輸入用戶密碼'
        })
      ],
      validators: {
        customMatchPasswordValidator: null
      },
      errorMessages: {
        customMatchPasswordValidator: '密碼輸入不不匹配'
      }
    })