Angular FormGroup 错误未显示答案

【问题标题】：Angular FormGroup Error doesnt get displayedAngular FormGroup 错误未显示
【发布时间】：2017-10-31 21:40:45
【问题描述】：

我的应用程序没有显示错误的问题。这是我的html：

      <ion-item>
        <ion-label floating style="margin-left: 20px;">Username</ion-label>
        <ion-input type="text" name="username" formControlName="username" [(ngModel)]="registerCredentials.username" required></ion-input>
      </ion-item>
      <ion-item *ngIf="!registerForm.get('username').valid  && (registerForm.get('username').dirty)">
         <p style="color: white;" *ngIf="registerForm.get('username').hasError('taken')">funktioniert</p>
         <p style="color: white;" *ngIf="registerForm.get('username').hasError('min')">funktioniert</p>
         <p style="color: white;" *ngIf="registerForm.get('username').hasError('max')">funktioniert</p>
         <p style="color: white;" *ngIf="registerForm.get('username').hasError('latein')">funktioniert</p>
     </ion-item>

这是我的 ts：

  registerForm: FormGroup;
  this.registerForm = formBuilder.group({
          username: ['', Validators.compose([Validators.minLength(3), Validators.maxLength(15), Validators.pattern('^[A-Za-z0-9]+$'), UsernameValidator.checkUsername, Validators.required])],
          email: ['', Validators.compose([Validators.pattern('^[a-zA-Z0-9.!#$%’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$'), EmailValidator.checkEmail, Validators.required])],
          password: ['', Validators.compose([Validators.minLength(8), Validators.maxLength(20), Validators.pattern('^[^-\s][a-zA-Z0-9_\s-]+$'),PasswordValidator.checkPassword, Validators.required])]
      });

这是我的自定义 UsernameValidator：

export class UsernameValidator {
  static checkUsername(control: FormControl): any {
    var onlyLetters;

    return new Promise(resolve => {
        if(control.value.toLowerCase() === "greg"){

          resolve({
            "taken": true
          });

        } else if (control.value.length < 3){
          resolve({
            "min": true
          });
        } else if (control.value.length > 8){
          resolve({
            "max": true
          });
        } else if (!(onlyLetters = /^[a-zA-Z\u00C0-\u00ff]+$/.test(control.value))){
          resolve({
            "latein": true
          });
        } else {
          resolve(null);
        }
    });
  }
}

此自定义验证器应返回错误键。在 html 中，我想检查错误键并在错误为真并且返回键时显示消息。但这似乎不起作用。验证本身有效。但是错误消息不起作用。

【问题讨论】：

你能重现这个问题吗

标签： javascript angular ionic-framework ionic2

【解决方案1】：

用于检查用户名是否被使用的验证器是 async 验证器。异步验证器应作为第三个参数传递。

所以将username formcontrol 的分配更改为：

username: ['', [sync validators here], [UsernameValidator.checkUsername]]

** 也不需要Validators.compose。

DEMO

作为一个不相关的问题，我会放弃[(ngModel)] 并使用表单控件。您可以改为将初始值设置为表单控件。如果稍后到达，您可以使用setValue()：

this.registrationForm.setValue({
  username: this.registerCredentials.username
  // setting other possible values to your form controls
})

并完全删除 ngModel。有两个绑定（ngModel 和 FormControl）可能会导致问题。

【讨论】：