Angular2異步表單驗證器（return Promise）

我正在嘗試更新Angular2 Forms Validation示例以處理異步驗證響應。這樣我可以打到HTTP端點來驗證用戶名。在他們的代碼Angular2異步表單驗證器（return Promise）

尋找他們目前正在使用的不是承諾，它的工作只是罰款：

/**一個英雄的名字不能匹配給定的正則表達式*/

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { 
    return (control: AbstractControl): {[key: string]: any} => { 
    const name = control.value; 
    const no = nameRe.test(name); 
    return no ? {'forbiddenName': {name}} : null; 
    }; 
}

我正在嘗試更新以返回Promise。例如：

/** A hero's name can't match the given regular expression */ 
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { 
    return (control: AbstractControl) => { 
    const name = control.value; 


    return new Promise(resolve => { 
       resolve({'forbiddenName': {name}}); 
     }); 

    }; 
}

但是，我得到的結果不顯示錯誤消息，它顯示未定義。

我的想法是它有事情做與他們正在處理顯示錯誤的方式：

onValueChanged(data?: any) { 
    if (!this.heroForm) { return; } 
    const form = this.heroForm; 

    for (const field in this.formErrors) { 
     // clear previous error message (if any) 
     this.formErrors[field] = ''; 
     const control = form.get(field); 

     if (control && control.dirty && !control.valid) { 
     const messages = this.validationMessages[field]; 
     for (const key in control.errors) { 
      this.formErrors[field] += messages[key] + ' '; 
     } 
     } 
    } 
    }

但是我不知道的這樣做的更好的方法。

Angular2例如： https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#live-example

鏈接到我的例子試圖返回承諾： https://plnkr.co/edit/sDs9pNQ1Bs2knp6tasgI?p=preview

來源

2017-04-12 aherrick

的問題是，你的AsyncValidator添加到SyncValidator陣列。 AsyncValidators在SyncValidators後添加到單獨的數組中：

this.heroForm = this.fb.group({ 
    'name': [this.hero.name, [ 
     Validators.required, 
     Validators.minLength(4), 
     Validators.maxLength(24) 
    ], 
    [forbiddenNameValidator(/bob/i)] // << separate array 
    ], 
    'alterEgo': [this.hero.alterEgo], 
    'power': [this.hero.power, Validators.required] 
});

來源

2017-04-12 21:08:00

感謝您的評論！我把驗證器放在自己的數組中，沒有收到硬錯誤，但沒有看到驗證信息。一切看起來都不錯，更新的PLNKR？ https://plnkr.co/edit/sDs9pNQ1Bs2knp6tasgI?p=preview – aherrick

'onValueChanged（data ?: any）'是這裏的問題。在這段代碼中，該方法負責構建錯誤輸出，並且一旦表單值發生更改，同步驗證程序運行，異步驗證程序就不會運行它。這就是爲什麼該方法看不到異步驗證的錯誤結果。在這個例子中構建錯誤輸出的方式根本不適用於異步驗證。如果您將名稱FormControl的錯誤對象打印到HTML，您將看到錯誤在那裏。（'{{heroForm.get（'name'）。errors | json}}'） –

謝謝。你如何建議改變它？尋找一個「通用」的方式來處理錯誤打印 – aherrick

Angular2異步表單驗證器（return Promise）

回答

相關問題