我正在Angular 4中尝试表单验证,我对实现自定义验证器有点困惑 .

这是我的表格组声明:

this.signupForm = fb.group({
        'username': [null, Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(21)])],
        'email': [null, Validators.compose([Validators.email, Validators.required])],
        'password': [null, Validators.compose([Validators.required, Validators.minLength(6)])]
    });

现在我有一个函数,每次'username'控件值更改为查询我的DB时都会触发,如果用户已经存在,则将布尔值'userExists'的值设置为true,否则设置为false . 我似乎无法将常规Validators与这个简单的布尔值结合起来 . 我已经尝试在我的HTML中执行以下操作:

<input type="text" [formControl]="signupForm.controls['username']" name="username" matInput placeholder="Username" (ngModelChange)="checkUsername($event)">
                <mat-error *ngIf="userExists || !signupForm.controls['username'].valid">
                    Error
                </mat-error>

我已经检查了userExists的 Value ,这很好用 . 问题是,似乎mat-error只会根据声明的Validators出现,而不考虑其他任何问题 . 有趣的是,如果你删除* ngIf,验证规则仍然会得到尊重,只有在无效条件(我不知道 - 必须与材料相关)的情况下才会出现mat-error .

任何帮助都会非常感激 .