返回promise时自定义异步验证无效

Question

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

无论来自验证的promise是否返回/解析为null或者{ 'isUrlAliasActivityMainAvailable': true },控制器总是将错误对象显示为跟随,从而将表单状态保持为无效,为什么(血腥地狱!)？

我正在使用:angular: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]

control(formState:Object,validator？:ValidatorFn | ValidatorFn [],asyncValidator？:AsyncValidatorFn | AsyncValidatorFn []):FormControl使用给定的formState,validator和asyncValidator构造一个新的FormControl.

formState可以是表单控件的独立值,也可以是包含值和禁用状态的对象.

要更正它,请将验证器移动到适当的阵列位置:

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