Question

我遇到的问题是我的应用程序没有显示错误。这是我的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>

这是我的意思：

  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);
        }
    });
  }
}

此自定义Validator应返回错误Keys。在html中我想检查错误键并在错误为真且返回密钥时显示消息。但它似乎没有用。验证itselfe工作。但是ErrorMessages不起作用。

Answer 1

您的验证程序用于检查是否已使用用户名，是异步验证程序。异步验证器应作为第三个参数传递。

所以将您的username表单控件的作业更改为：

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）可能会导致问题。

Angular FormGroup错误不会显示

1 个答案: