自定义异步验证在返回承诺时不起作用

Question

我正在调用网络 api 来检查 urlalias 是否可用，为此我在我的异步验证器中使用了 httpservice。问题在于，当调用验证器时，将执行所有正确的代码路径（所有 console.log() 运行并按预期运行）。

无论是从验证 returns/resolves 到 null 还是 { 'isUrlAliasActivityMainAvailable': true } 的承诺，控制器总是显示如下错误对象，从而使表单状态保持无效，为什么（该死的地狱！）？

我正在使用：angular:2.1.0 和 rxjs:5.0.0-beta.12

这是我的表单生成器：

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]

control(formState: Object, validator?: ValidatorFn|ValidatorFn[], asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]) : FormControl Construct a new FormControl with the given formState,validator, and asyncValidator.

formState can either be a standalone value for the form control or an object that contains both a value and a disabled status.

要更正它，请将验证器移动到适当的数组位置：

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

自定义异步验证在返回承诺时不起作用

custom async validation not working when returning a promise

validation

formbuilder

promise

rxjs

angular