用户名输入字段的Angular2异步验证器

Question

我正在尝试验证是否使用了用户名，并将结果分配给布尔值：

    isUsernameAvailable(control: FormControl) {
   this.authenticationService.isUsernameAvailable(control.value)
       .subscribe(
           result => console.log(result.taken),
           error => console.log(error)
       );
}

这将使用输入字符串，并返回一个布尔值，无论它是否与数据库中的用户匹配。 使用字符串调用时，它可以按预期工作，但是我想使用字段输入作为参数来调用它，如下所示：

         this.username = new FormControl(null, 
         Validators.compose([
             Validators.required,
             Validators.minLength(3),
     ]),this.isUsernameAvailable(this.username.value)); // <-- this is wrong obviously

我发现将其添加到ngOnInit（）时可以使用：

     this.username.valueChanges.debounceTime(400).subscribe(value => {return this.isUsernameAvailable(value) });

所以我的问题是如何做到这一点，以便我的验证器从输入字段中获取输入文本，并检查是否使用了用户名。 编辑：当我只使用this.isUsernameAvailable我得到

“无法读取未定义的属性'authenticationService'”错误

。 我也尝试将其绑定：this.isUsernameAvailable.bind（this），但随后我得到了

无法读取未定义错误的属性“订阅”

我也将代码更新为上次修改的代码。 （控制台日志报告正确的值，但验证器返回错误）。

Answer 1

因此，显然我只是不知道自己在做什么，但是我以某种方式使它工作了。 如果有人遇到相同的问题，我将粘贴我的解决方案。 我的最终代码是：

this.username = new FormControl(null, [
            Validators.required,
            Validators.pattern(this.usernamePattern),
            Validators.minLength(3),
            Validators.maxLength(15)
        ], this.validateUsername.bind(this)
    );


  validateUsername(c: FormControl) {
    return this.usernameAvailable(c.value);
}

  private validationTimeout: any;

  usernameAvailable(username: string) {
    clearTimeout(this.validationTimeout);
    return new Promise((resolve) => {
        this.validationTimeout = setTimeout(() => {
            let req = this.authenticationService.isUsernameAvailable(username);
            req.subscribe(result => {
                    if (result.taken) {
                        resolve({taken: true})
                    }
                    else {
                        resolve(null)
                    }
                },
                error => this.logger.error(error.message))
        }, 600);
    });
}

请记住，您不能直接在异步验证器上使用debounceTime，因为它总是在每次击键后立即启动，因此您必须以某种方式使请求超时。 可能有更好的方法，这对我有用。