Angular 表單驗證類庫 ngx-validator 1.0 正式發布

背景介紹

之前寫了一篇《如何優雅的使用 Angular 表單驗證》，結尾處介紹了統一驗證反饋的類庫 ngx-validator ，由於這段時間一直在新模塊做微前端以及相關業務組件庫，工具等開發，一直拖到現在，目前正式版 1.0 終於可以發布了。
可能有些人沒有閱讀過那篇博客，我這里簡單介紹下 ngx-validator 主要的功能。

統一驗證規則和錯誤反饋策略，通過響應式（配置的方式）設置每個元素對應每個驗證器的錯誤提示文案以及統一錯誤信息反饋，避免手動寫重復的模版實現錯誤提示，讓開發人員專心寫業務即可；
擴展一些 Angular 本身沒有提供驗證器和模版驅動的驗證指令，比如 ngxUniqueCheck 、 ngxMax 、 ngxMin ;
支持模版驅動和響應式驅動表單的驗證。

從上次 0.0.1 版本到 1.0.0 正式發布新增了的功能有：

新增了 validateOn 支持 submit 和 blur 光標移走驗證，之前只有點擊按鈕提交才會驗證
對響應式表單支持的完善；
測試和 Demo 的完善；
重構了代碼，添加了自動生成 changelog 和 husky 鈎子做 commit message 規范檢查和自動格式化（這些和庫的功能無關，與開發者有關）

使用方式

如果你不想聽我廢話，可以直接看示例，其中包括模版驅動和響應式驅動表單實現驗證的全部代碼。

安裝

在你的項目中執行命令 npm install @why520crazy/ngx-validator --save 進行模塊的安裝

引入模塊

在啟動模塊 AppModule 中直接引入 NgxValidatorModule ，當然引入的時候可以通過 NgxValidatorModule.forRoot 進行一些全局參數的配置，配置包含全局的驗證錯誤信息，錯誤反饋方式，目前反饋方式支持 boostrap4 的表單錯誤樣式和 noop（什么都不提示），當然你可以擴展自己的錯誤反饋策略。

import { NgxValidatorModule, ValidationFeedbackStrategyBuilder } from '@why520crazy/ngx-validator';

@NgModule({
  imports: [
    CommonModule,
    NgxValidatorModule.forRoot({
         validationFeedbackStrategy: ValidationFeedbackStrategyBuilder.bootstrap(),
        validationMessages: {
            username: {
                required: 'Username is required.',
                pattern: 'Incorrect username format.'
            }
        }
    })
  ]
})
class AppModule {}

模版驅動表單驗證

在 form 表單元素上添加 ngxFormValidator 指令，配置的參數和全局配置的參數類似，此處單獨配置只會對當前 Form 有效。
由於 ngxFormValidator 采用的驗證器，以及元素是否驗證通過完全讀取的是 Angular 表單提供的信息，所以模版驅動表單必須遵循 Angular 表單的一些規則：

表單元素必須設置一個 name，這個 name 會和 ngForm controls 中的對象對應;
表單元素必須設置 ngModel ，當提交表單時通過 ngModel 這只的變量獲取用戶輸入的數據；
驗證器直接設置到表單元素上，比如 Angular 內置的 required 、 email 、 pattern 、 maxlength 、 minlength 以及 ngx-validator 類庫提供的 ngxMax 、 ngxMin 、 ngxUniqueCheck 。

最后在提交按鈕上綁定 ngxFormSubmit 事件，當按鈕點擊后會觸發表單驗證，驗證不通過會根據每個表單元素配置的提示信息反饋錯誤，如果使用的默認的 bootstrap4 的反饋策略，會在表單元素上加 is-invalid class 樣式，同時在表單元素后追加 {相關的錯誤提示信息}

       Email address


    Submit

響應式驅動表單驗證

響應式表單驗證和模版驅動類似，區別就是不需要給每個元素加 ngModel 和驗證器，直接使用 formControlName 指令指定名稱, 然后在組件中通過 FormBuilder 生成 group 即可，基本沒有特殊配置，參考 Angular 官網的響應式表單驗證示例即可。

APIs

ngxFormValidator 表單配置

屬性名	類型	備注
validationMessages	{[controlName: string]: {[validatorErrorKey: string]: string}}	表單元素驗證規則
validationFeedbackStrategy	IValidationFeedbackStrategy	沒有配置，以全局配置的驗證反饋策略為主
validateOn	'submit' \	'blur'	沒有配置，以全局配置的 validateOn 為主

validatorConfig: NgxValidatorConfig = {
    validationMessages: {
        username: {
            required: '用戶名不能為空',
            pattern: '用戶名格式不正確，以字母，數字，下划線組成，首字母不能為數字，必須是2-20個字符',
            ngxUniqueCheck: '輸入的用戶名已經存在，請重新輸入'
        }
    },
    validateOn: 'submit'
};

全局配置

全局配置可以通過引入 NgxValidatorModule.forRoot(config) 進行設置，也可以在運行時注入 NgxValidatorLoader 服務進行配置

屬性名	類型	備注
validationMessages	{[controlName: string]: {[validatorErrorKey: string]: string}}	表單元素驗證規則
validationFeedbackStrategy	IValidationFeedbackStrategy	沒有配置，以全局配置的驗證反饋策略為主
globalValidationMessages	{[validatorErrorKey: string]: string}	每個驗證器全局的默認驗證規則
validateOn	'submit' \	'blur'	觸發驗證，是提交觸發驗證還是光標移走觸發驗證

globalValidationMessages 默認規則如下，當某個表單元素比如 username 在表單和全局的 validationMessages 都沒有被設置，驗證不通過會直接顯示 globalValidationMessages 中的 required 提示信息

{
    required: '該選項不能為空',
    maxlength: '該選項輸入值長度不能大於{requiredLength}',
    minlength: '該選項輸入值長度不能小於{requiredLength}',
    ngxUniqueCheck: '輸入值已經存在，請重新輸入',
    email: '輸入郵件的格式不正確',
    repeat: '兩次輸入不一致',
    pattern: '該選項輸入格式不正確',
    number: '必須輸入數字',
    url: '輸入URL格式不正確',
    max: '該選項輸入值不能大於{max}',
    min: '該選項輸入值不能小於{min}'
};

文章首發於「Worktile官方博客」，轉載請注明來源。