定製異步驗證在返回承諾時不起作用

Question

我正在調用web api來檢查urlalias是否可用，對於此任務，我在我的異步驗證程序中使用了httpservice。 問題是，當調用驗證程序時，將執行所有正確的代碼路徑（所有console.log()運行並按預期行爲）。

無論驗證中的承諾是否返回/解析爲空或一個{ 'isUrlAliasActivityMainAvailable': true }，控制器總是顯示一個錯誤對象，因此保持表單狀態爲無效，爲什麼（血腥地獄！）？

我使用的是：角：2.1.0和rxjs：5.0.0-beta.12

這是我formbuilder：

this.formBuilder.group({ 
//... 
"urlAliasActivityMain":[null,[ ValidatorsZr.isUrlAliasActivityMainAvailableAsyncValidator(this.httpActivityService)]], 
}); 

這是我的驗證：

public static isUrlAliasActivityMainAvailableAsyncValidator(httpActivityService: HttpActivityService) { 
     return function (control: FormControl): Promise<any> | Observable<any> { 

      const promise = new Promise<any>(
       (resolve, reject) => { 
        httpActivityService.isUrlAliasActivityMainAvailable(control.value) 
         .subscribe(
         (data: any) => { 
          console.log("isUrlAliasActivityMainAvailableAsyncValidator"); 
          console.log(data); 
          if (data == false) { 
           console.log("data == false"); 
           resolve({ 'isUrlAliasActivityMainAvailable': true }); 
          } 
          else { 
           console.log("data == true"); 
           resolve(null); 
          } 
         }, 

        ) 
       }); 

      return promise; 
     } 
    } 

Answer 1

您的異步驗證器列在同步驗證器中的位置數組並且正在被錯誤地評估。

[objectValue, synchronous validators, asynchronous validators]

控制（formState：對象，驗證器?: ValidatorFn | ValidatorFn []， asyncValidator ?: AsyncValidatorFn | AsyncValidatorFn []）：FormControl 構造一個新的FormControl與給定formState，驗證器，和 asyncValidator。

formState既可以是用於窗體控件的獨立值，也可以是包含值和禁用狀態的對象 。

要糾正它，移動你的驗證到合適的陣列位置：

this.formBuilder.group({ 
//... 
"urlAliasActivityMain":[null, null, ValidatorsZr.isUrlAliasActivityMainAvailableAsyncValidator(this.httpActivityService)], 
});