Question

以下是使用标准角度2表单构建器创建的注册表单：

this.form = this.formBuilder.group({
    login : [
        this.formValue.login,
        [
            Validators.required,
            Validators.minLength(loginLength.min),
            Validators.maxLength(loginLength.max),
            regexpValidator(loginPattern),
        ],
        //my custom validator class to check if login already exists
        LoginExistenceValidator,
    ],
    password : [
        this.formValue.password,
        [
            Validators.required,
            Validators.minLength(passwordLength.min),
            Validators.maxLength(passwordLength.max),
        ],
    ],
});

如前所述 - http://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html#custom-validators-with-dependencies：

事实证明验证器也可以是类 实现了validate（c：FormControl）方法。

因此可以从验证器向访问远程数据注入服务。

所以我创建了这样的验证器：

import { Injectable, Inject, forwardRef } from '@angular/core';
import { Validator, FormControl }         from '@angular/forms';

import { UsersAdapter } from 'common/adapters/users';

@Injectable()
export class LoginExistenceValidator implements Validator {

    private adapter;

    constructor(@Inject(forwardRef(()=>UsersAdapter)) adapter) {
        debugger
    }

    validate(control: FormControl) {
        console.log("yep i'm called");
        return function(control: FormControl){

            //validation logic

            let validator = new Promise((resolve)=>{
                //mock random success/fail for a while
                setTimeout(()=>{
                    let random = Math.round(Math.random());
                    let value = random ? null : { reserved: true };
                    console.log(resolve);
                    resolve(value);
                },2000);

            });

            return validator;

        }
    }
}

UserAdapter是Angular Http的包装器，可以检索数据。现在我没有使用它，每次验证调用都应该返回随机成功/失败结果。

此代码在浏览器中抛出此类错误：

EXCEPTION: Cannot read property 'subscribe' of undefined

发生错误，因为Angular实际上没有调用validate()，而FormControl实例传递给构造函数而不是提供UserAdapter服务。

当我尝试使用函数而不是类时，一切正常。如何判断angular正确使用我的验证类？提前谢谢。

Answer 1

您引用的句子是关于使用元素上的选择器应用的验证程序指令。

如果要在反应形式中使用它，则需要传递函数

validate()方法应该返回Promise或Observable而不是返回Promise或Observable的函数。

validate(control: FormControl) {
    console.log("yep i'm called");
        return = new Promise((resolve)=>{
            //mock random success/fail for a while
            setTimeout(()=>{
                let random = Math.round(Math.random());
                let value = random ? null : { reserved: true };
                console.log(resolve);
                resolve(value);
            },2000);

        });
    }
}

然后像

一样使用它

this.form = this.formBuilder.group({
    login : [
        this.formValue.login,
        [
            Validators.required,
            Validators.minLength(loginLength.min),
            Validators.maxLength(loginLength.max),
            regexpValidator(loginPattern),
        ],
        //my custom validator class to check if login already exists
        new LoginExistenceValidator().validate,
    ],
    password : [
        this.formValue.password,
        [
            Validators.required,
            Validators.minLength(passwordLength.min),
            Validators.maxLength(passwordLength.max),
        ],
    ],
});

Angular2：无法创建自定义验证程序类

1 个答案: