Angular自定義表單驗證

前端表單驗證

爲年齡輸入框添加了兩個驗證，並分狀況填寫了提示語

年齡請輸入年齡年齡必須爲數字，且大於等於0

[Validators.required, this.isMoreThanZero]爲age字段的驗證列表
其中Validators.required是Validators提供的驗證，this.isMoreThanZero是自定義驗證

this.validateForm = this.fb.group({
    age: [null, [Validators.required, this.isMoreThanZero]], // 年齡
});

自定義isMoreThanZero的驗證規則

/**
 * @description  自定義表單驗證:是數字而且大於等於0
 */
isMoreThanZero = (control: FormControl) => {
    if (!control.value) {
        return { required: true };
    } else if (isNaN(Number(control.value)) || control.value < 0) {
        // 注意，這裏返回的是isMoreThanZero，才能對應.hasError('isMoreThanZero')
        return {  isMoreThanZero: true };
    }
}

後端表單驗證

好比，業務要求編碼不重複，查詢編碼是否存在
設置一個叫作existSameCode的驗證，當existSameCode=true，則驗證失敗

編碼請輸入編碼已存在相同編碼

設置表單驗證
Tip:[默認值,[同步校驗],[異步校驗]]
這裏this.checkData是異步校驗，因此寫到第三個參數的位置

this.validateForm = this.fb.group({
    code: [null, [Validators.required], [this.checkData]], // 編碼
});

調用testService的方法，異步查詢結果

/**
 * @description  自定義表單驗證:查詢編碼是否重複
 */
checkData: AsyncValidatorFn = (control: FormControl): Promise=>{
    return new Promise((resolve2) => {
        setTimeout(() => {
            this.testService.checkData({code:control.value})
                .then((response: any) => {
                    if (response) {
                        resolve2({existSameCode: true});
                    } else {
                        resolve2(null);
                    }
                });
        }, 1500);
    });
}

若是存在，返回true，不存在，返回false

checkData(params): Promise{
    // 這裏能夠調用服務，驗證是否存在相同編碼
    // 例子簡化爲前端驗證
    const pRequest =new Promise(function(resolve, reject) {
        let existCodeList=['1','2','3'];
        if(existCodeList.indexOf(params.code) > -1){
            resolve(true);
        }
        resolve(false);
    }).then((ret: any) => {
        return ret;
    });

    return Promise.race([this.requestHelperService.getTimeoutPromise(), pRequest]).catch(ret => {
        this.requestHelperService.handleRequestError(ret, true);
    });
}

示例代碼

示例代碼

參考資料

Validators
JavaScript Promise迷你書（中文版）