表單欄位一致性檢查 1

1 篇文章 / 0 new
發表回應前，請先登入
週一, 2018-03-12 22:04
#1
author
表單欄位一致性檢查 1
如使用者註冊時, 密碼欄位為免誤輸入通常會要求輸入兩次來提高輸入的正確性, 利用 Directive 增加 <input> 功能來達成即時的檢驗與提示
► equal.validator.directive.ts 
import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
 
@Directive({
    selector: '[equalValidate][formControlName], [equalValidate][formControl], [equalValidate][ngModel]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidatorDirective), multi: true }
    ]
})
export class EqualValidatorDirective implements Validator {
    //引入 tag屬性 資料
    constructor(@Attribute('equalValidate') public validateEqual: string, @Attribute('master') public master: string) { }
 
    private get isMaster() {
        if (!this.master) return false;//無屬性資料或false, 表示為輔助驗證欄位
        return this.master === 'true' ? true : false;
    }
 
    validate(c: AbstractControl): { [key: string]: any } {
        console.log('EqualValidator');
 
        let v = c.value;// self value
        let e = c.root.get(this.validateEqual);// 取得比對欄位        
        //
        if (e && this.isMaster) {//觸發為主欄位
            if (v === e.value) {//資料一致
                if (e.errors) {//清除錯誤紀錄
                    delete e.errors['validateEqual'];
                    if (!Object.keys(e.errors).length) e.setErrors(null);
                }
            } else {
                e.setErrors({ validateEqual: false });
            }
        } else if (e && v !== e.value) {//觸發為驗證欄位, 資料不一致
            return {
                validateEqual: false
            }
        }
 
        return null;
    }
}
► 使用
1. Module 的 declarations 內引入 EqualValidatorDirective
2. <input> 的主欄位加入 equalValidate, master 屬性. 再次輸入欄位則僅加入 equalValidate 屬性資料指向主欄位.

► 表單範例(僅列主要code) 
<form [formGroup]="editForm" (ngSubmit)="onSubmit(editForm.value, editForm.valid)">
    <input type="password" placeholder="密碼" formControlName="passwd" equalValidate="repeatPasswd" master="true">
    <input type="password" placeholder="再次輸入" formControlName="repeatPasswd" equalValidate="passwd"></span>
   <span style="font-size:14px"><mat-error>密碼不一致</mat-error>
    <button mat-button color="warn" type="submit" [disabled]="!editForm.valid" >確認</button>
</form>

reference https://scotch.io/tutorials/how-to-implement-a-custom-validator-directiv...
頂
Free Web Hosting