背景介紹
之前寫了一篇 如何優雅的使用 Angular 表單驗證，結尾處介紹了統一驗證回報的類庫ngx-validator，由于這段時間一直在做微前端以及相關業務元件庫，工具等開發，一直拖到現在，現在正式版 1.0 終于可以釋出了。
可能有些人沒有閱讀過那篇部落格，我這裡簡單介紹下
ngx-validator主要的功能。
- 統一驗證規則和錯誤回報政策，通過響應式（配置的方式）設定每個元素對應每個驗證器的錯誤提示文案以及統一錯誤資訊回報，避免手動寫重複的模版實作錯誤提示，讓開發人員專心寫業務即可；
- 擴充一些 Angular 本身沒有提供驗證器和模版驅動的驗證指令，比如 ngxUniqueCheck 、 ngxMax 、 ngxMin ；
- 支援模版驅動和響應式驅動表單的驗證。
，
這個類庫不是替代 Angular Forms 表單子產品的從上次 0.0.1 版本到 1.0.0 正式釋出新增了的功能有：
- 新增了 `validateOn` 支援 `submit` 和 `blur` 光标移走驗證，之前隻有點選按鈕送出才會驗證；
- 對響應式表單支援完善；
- 測試和 Demo 的完善；
- 重構了代碼，添加了自動生成 changelog 和 husky 鈎子做 commit message 規範檢查和自動格式化（這些和庫的功能無關，與開發者有關）
使用方式
如果你不想聽我廢話，可以直接看 Ngx Validator 示例 ，其中包括模版驅動和響應式驅動表單實作驗證的全部代碼。
安裝
在你的項目中執行下面指令進行子產品的安裝
npm install @why520crazy/ngx-validator --save
引入子產品
在啟動子產品 AppModule 中直接引入
NgxValidatorModule，當然引入的時候可以通過
NgxValidatorModule.forRoot進行一些全局參數的配置，配置包含全局的驗證錯誤資訊，錯誤回報方式，目前回報方式支援 boostrap4 的表單錯誤樣式和noop（什麼都不提示），當然你可以擴充自己的錯誤回報政策。
import
模版驅動表單驗證
在 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 樣式，同時在表單元素後追加
<div class="invalid-feedback">{相關的錯誤提示資訊}</div><
響應式驅動表單驗證
響應式表單驗證和模版驅動類似，差別就是不需要給每個元素加
ngModel和 驗證器，直接使用
formControlName指令指定名稱, 然後在元件中通過
FormBuilder生成 group 即可，基本沒有特殊配置，參考 Angular 官網的響應式表單驗證示例即可。
APIs ngxFormValidator 表單配置 validatorConfig
全局配置可以通過引入
NgxValidatorModule.forRoot(config)進行設定，也可以在運作時注入
NgxValidatorLoader服務進行配置
{
required: '該選項不能為空',
maxlength: '該選項輸入值長度不能大于{requiredLength}',
minlength: '該選項輸入值長度不能小于{requiredLength}',
ngxUniqueCheck: '輸入值已經存在，請重新輸入',
email: '輸入郵件的格式不正确',
repeat: '兩次輸入不一緻',
pattern: '該選項輸入格式不正确',
number: '必須輸入數字',
url: '輸入URL格式不正确',
max: '該選項輸入值不能大于{max}',
min: '該選項輸入值不能小于{min}'
};
- 單獨驗證某一個表單元素, 擷取到 NgxFormValidatorDirective 執行個體 ngxFormValidator: NgxFormValidatorDirective ，通過調用 ngxFormValidator.validator.validateControl(name: string) 方法單獨驗證；
- 根據服務端傳回的錯誤，設定某個表單元素錯誤提示資訊，調用
ngxFormValidator.validator.markControlAsError(name: string, errorMessage: string)
如果你的項目不是使用 bootstrap4，而是其他 UI 庫，那麼可以通過擴充自己的錯誤回報政策，然後在全局設定中配置一次後所有的表單驗證都會使用配置之後的政策，以下是一個自定義回報政策的示例：
const CUSTOM_INVALID_CLASS = 'custom-invalid';
const CUSTOM_INVALID_FEEDBACK_CLASS = 'custom-invalid-feedback';
export class CustomValidationFeedbackStrategy implements ValidationFeedbackStrategy {
showError(element: HTMLElement, errorMessages: string[]): void {
element.classList.add(CUSTOM_INVALID_CLASS);
// add element show error message
}
removeError(element: HTMLElement): void {
element.classList.remove(CUSTOM_INVALID_CLASS);
// remove element error message
}
}
知乎編輯器沒有對 Markdown 的支援，如果希望有完整的閱讀體驗，可以檢視 https://github.com/why520crazy/ngx-validator/blob/master/1.0.0-publish.md