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

背景介紹

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

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

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

1. 新增了 validateOn 支持 submit 和 blur 光標移走驗證，以前只有點擊按鈕提交纔會驗證
2. 對響應式表單支持的完善；
3. 測試和 Demo 的完善；
4. 重構了代碼，添加了自動生成 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 表單的一些規則：

1. 表單元素必須設置一個 name，這個 name 會和 ngForm controls 中的對象對應;
2. 表單元素必須設置 ngModel，當提交表單時經過 ngModel 這隻的變量獲取用戶輸入的數據；
3. 驗證器直接設置到表單元素上，好比 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技術博客

歡迎訪問交流更多關於技術及協做的問題。

文章轉載請註明出處。