Angular如何在模板驅動表單中自定義校驗器

cipchk發表於2019-02-16
Angular

引言

模板驅動表單相比較響應式表單可以少更少的程式碼做同樣的事情，可也損失了自由度與更易測試，當然很多人並不在乎啦。

所以我相信很多人在編寫Angular不自由自主去更傾向於模板驅動表單的寫法。

表單最核心的是校驗體驗，在Angular中簡直就是發揮到了極致，比如：required、min、max、pattern 等，這些原本是HTML DOM元素中的表述，而Angular預設實現了一整套的校驗指令，比如：required 對應 RequiredValidator。

然後很多時候我們需要一些特殊的校驗，比如：資料比較、遠端校驗等。那在模板驅動表單風格中我們要如何優雅的實現這樣一個校驗器呢？

一、Angular是如何校驗？

一般在編寫一個手機文字框可能是這樣：

<input [(ngModel)]="user.mobile" #mobile="ngModel" autocomplete="off" type="tel" class="form-control" name="mobile" required maxlength="11">
<div *ngIf="mobile.errors">
    <p *ngIf="mobile.errors.required">手機號必填</p>
    <p *ngIf="mobile.errors.pattern">手機號格式不正確</p>
</div>

以上幾行很友好的實現從必填項、格式進行校驗，而這一切都是依靠 [(ngModel)] 統一採集，得以只需要利用一個模板引用變數訪問到每個校驗指令的錯誤資訊。

1、[(ngModel)] 到底做了什麼？

在解析這個問題前需要先了解一下 RequiredValidator 是如何定義的。

@Directive({
  providers: [{
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => RequiredValidator),
      multi: true
    }]
})
export class RequiredValidator {}

只看最核心向 NG_VALIDATORS 識別符號註冊一個 RequiredValidator 指令。這樣就可以使 ngModel 指令中注入 NG_VALIDATORS 後就能得到這個指令物件。

ngModel 我把它簡化了一下：

export class NgModel extends NgControl {
    constructor(@Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>) {}
    
    get validator(): ValidatorFn|null {
        // 各種校驗並返回結果
    }
}

有關更多ng_model.ts可以深入閱讀原始碼。

Angular會在每一次表單值變更時，對所有的表單中已經安裝的校驗器進行一次遍歷。

二、編寫一個校驗器

誠如 required 校驗器一樣，依然是把自定義校驗器掛到 NG_VALIDATORS 當中。假如我們希望手機文字框只能輸入 159 開頭的一個校驗器。

定義Directive

@Directive({
    selector: `[user-mobile]`,
    exportAs: `userMobile`,
    providers: [{
        provide: NG_VALIDATORS,
        useExisting: forwardRef(() => UserMobileDirective),
        multi: true
    }]
})
export class UserMobileDirective {}

一個非常普通的指令定義方法，只是多了一個將 UserMobileDirective 註冊到 NG_VALIDATORS 識別符號當中而已。別問我為什麼，一種約定。

類

export class UserMobileDirective implements Validator {
    validate(c: AbstractControl): { [key: string]: any; } {
        let value: string = c.value || ``;
        if (!value.startsWith(`159`)) {
            return {
                mobile: {
                    msg: `手機號必須是159開頭`,
                    actualValue: value
                }
            };
        }
        return null;
    }
}

只需要實現 Validator 介面的 validate 方法即可。

從 c 中獲取DOM值，當遇到非 159 開頭時，返回一個用於表述訊息的物件即可，否則返回一個 null。這個物件會被統一採集在 ngModel.errors 物件下面。故而，只需要在DOM元素加上 user-mobile 指令即可。

<input user-mobile [(ngModel)]="user.mobile" #mobile="ngModel" autocomplete="off" type="tel" class="form-control" name="mobile" id="mobile" required maxlength="11">
<div *ngIf="mobile.errors">
    <p *ngIf="mobile.errors.required">手機號必填</p>
    <p *ngIf="mobile.errors.mobile">{{mobile.errors.mobile.msg}}</p>
</div>

介面還包括一個 registerOnValidatorChange 可選方法，當某些其它外部屬性的變更時，允許重新手動觸發校驗。

三、非同步校驗器

如果說使用者手機校驗器需要檢查手機是否為黑名單的情況下，正常黑名單資料都存在遠端當中。這樣情況下需要傳送HTTP請求，而這一過程就是非同步。

Angular針對這類非同步校驗有獨立的另一個識別符號，即：NG_ASYNC_VALIDATORS，而其它程式碼都是相通的。

@Directive({
    selector: `[user-async]`,
    exportAs: `userAsync`,
    providers: [{
        provide: NG_ASYNC_VALIDATORS,
        useExisting: forwardRef(() => UserAsyncDirective),
        multi: true
    }]
})
export class UserAsyncDirective implements Validator {
    validate(c: AbstractControl): Observable<any> {
        return c.valueChanges
                // 去抖
                .debounceTime(300)
                // 抑制重複值
                .distinctUntilChanged()
                // 1、可以使用flatMap進行遠端校驗
                // .flatMap(value => value)
                // 2、本地模擬判斷
                .map((value: string) => {
                    if ([ `15900000001`, `15900000002` ].includes(value)) {
                        return {
                            mobile: {
                                msg: `手機號為黑名`,
                                actualValue: value
                            }
                        }
                    }
                    return null;
                })
                .first();        
    }
}

除了 NG_ASYNC_VALIDATORS 核心的結構完全沒有變動。

而對於 validate 方法返回的是一個 Observable 型別，利用對 valueChanges 的訂閱可以製作一些像去抖動作。

而最後必須使用 first() 做為結尾，原因每一次校驗，對於結果而言只允許一個。

結論

本章介紹的是如何對模板驅動表單建立自定義校驗器，它相比較響應式表單自定義校驗器略為複雜一些。但是實際運用中，我們不應該只為某個構建表單風格做一種自定義校驗器，應該二者是共存的。

比如上面 159 開頭的示例。更合理的編寫方式應該是將校驗邏輯獨立：

export class MyValidators {
    static checkMobile(value: string): ValidationErrors|null {
        return !value.startsWith(`159`) ? { mobile: { msg: `手機號必須是159開頭` } } : null;
    }
}

// 校驗器類
export class UserMobileDirective implements Validator {
    validate(c: AbstractControl): { [key: string]: any; } {
        let value: string = c.value || ``;
        return MyValidators.checkMobile(value);
    }
}

這樣，同一個校驗器，不管是模板驅動表單還是響應式表單，都能是通用的。

Happy coding!

相關文章