Angular Async Validator 未按预期工作答案

【问题标题】：Angular Async Validator not working as expectedAngular Async Validator 未按预期工作
【发布时间】：2019-02-10 16:02:10
【问题描述】：

我想在 Angular 中实现自定义异步验证器。但它似乎不起作用。控制台中没有错误。

validator shouldBeUnique 是一个异步验证器，它不工作验证器cannotContainSpace 是非异步自定义验证器，它工作得很好。我无法弄清楚出了什么问题。

查看：

<form [formGroup]="form">
    <div class="form-group">
        <label for="username">Username</label>
        <input 
        formControlName="username"
            id="username" 
            type="text" 
            class="form-control">

            <div *ngIf="username.errors.cannotContainSpace" class="alert alert-danger">Can not have space</div>
            <div *ngIf="username.errors.shouldBeUnique" class="alert alert-danger">shouldBeUniquee</div>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input 
        formControlName="password"
            id="password" 
            type="text" 
            class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

组件：

export class SignupFormComponent {
  form = new FormGroup(
    {
      username: new FormControl('', [Validators.required,
      UsernameValidators.cannotContainSpace, UsernameValidators.shouldBeUnique
      ]),
      password: new FormControl('', Validators.required),


    });

  get username() {
    console.log(this.form.get('username').errors.shouldBeUnique);
    return this.form.get('username');
  }
}

username.validator.ts

export class UsernameValidators {
    static cannotContainSpace(control: AbstractControl): ValidationErrors | null {
        if ((control.value as string).indexOf(' ') != -1) {
            console.log('noo');
            return { cannotContainSpace: true };
        }
        else {
            return null;
        }
    }

    static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors | null> {

        return new Promise((resolve, reject) => {
            setTimeout(() => { 
                if (control.value === 'arbaaz')
                    resolve( { shouldBeUnique: false });
                    else                  
                    resolve(null); 
            }, 2000);
        });
    } 
}

【问题讨论】：

这个问题为我节省了很多时间。代码写得很好。

标签： javascript angular angular5

【解决方案1】：

异步验证器应作为第三个参数：

username: new FormControl('', 
          [Validators.required, UsernameValidators.cannotContainSpace],
          [UsernameValidators.shouldBeUnique]),

【讨论】：

现在我收到Cannot read property 'cannotContainSpace' of null
@Arbaaz username.errors?.cannotContainSpace 也可能你的意思是resolve( { shouldBeUnique: true });
@yurzui 实现这个代码的教程视频不用写吗？它仍然运行良好。我想知道为什么。
@Arbaaz 在那个教程中作者首先检查invalid 属性monosnap.com/file/KNiQ7XxZVn07dAPlXQ1YUnjIVWiV5c 所以如果username.invalid 那么它肯定有错误。
太好了，yurzui 会在我离开时解决问题 :D 但是太好了，@Arbaaz 很高兴这一切都解决了！ :)