用户名已存在，请在注册时检查可用选项

Question

我正在创建一个角度应用程序，用户可以在其中注册。但是在注册时，我要求他提供一些详细信息，例如电子邮件，手机号码等。另外，他可以选择一个用户名。但是在这里，我想在他输入用户名后立即对其进行检查，并显示错误消息，例如“此用户名已存在于我们的数据库中”。

我有mysql数据库，前端为angular4。我是这个角度开发的新手，请帮我怎么做？

这是Google注册的示例图片，

Answer 1

您可以使用AsyncValidator和angulars -validation-in-angulars

或者我的实现：

表格初始化：

this.form = this.formBuilder.group({
  username: [{value: null, disabled: false}, 
    [Validators.required, this.validateUsername()]]
})

自定义验证器：

private validateUsername(): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} => {
      this.someServiceWorkingWithDatabase.checkUsername(control)
        .subscribe(
          ({data}) => {
            let res: string = data;
            if (res === control.value) {
              return {'alreadyExist': true};
            } else {
              return null
            }
          },
          (error) => {
            console.log(error);
          }
        )
    }
}

模板：

<div class="formError" *ngIf="this.form['controls']
  .username.hasError('alreadyExist')">
    *this username already exists in our database</div>