javascript - Angular 2 : Unable to create custom validator class

Question

这是使用标准 Angular 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 :

It turns out that a validator can also be a class as long as it implements a validate(c: FormControl) method.

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

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

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

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

如果你以 react 形式使用它，你需要传递一个函数

validate() 方法应该返回一个 Promise 或 Observable 而不是返回一个 Promise 或可观察。

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),
        ],
    ],
});