Angular 5 中未显示反应式表单验证错误

Question

我正在开发 Angular 5 应用程序，我想根据用户输入显示以下错误消息

emptyUserName = 'You must enter a username';
minlengthUserName = 'User name must be at least 3 characters long';
maxlengthUserName = 'Username cannot exceed 20 characters';
userNamePattern = 'Username should be in alphanumeric only';

但问题只是， emptyUserName工作其他人不起作用，控制台中也没有错误。

下面是我的组件代码

    this.loginForm = new FormGroup({
        userName: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(20), Validators.pattern(/^[a-zA-Z0-9]+$/)]),
        password: new FormControl('', [Validators.required])
    });

下面是我的模板代码，

 <form class="ro-form" [formGroup]="loginForm" (ngSubmit)="doLogin()" novalidate>
        <div class="form-group">
          <label class="labelHead" for="username">
            <b>Username</b>
          </label>
          <input type="text" id="username" formControlName="userName" placeholder="username">

          <div *ngIf="loginForm.controls.userName.touched && loginForm.controls.userName.errors?.required" class="form-error-messages"
            id="error-no-username">
            {{emptyUserName}}
          </div>
          <div *ngIf="loginForm.controls.userName.touched && loginForm.controls.userName.errors?.minLength" class="form-error-messages"
            id="error-minlength-username">
            {{minlengthUserName}}
          </div>
          <div *ngIf="loginForm.controls.userName.touched && loginForm.controls.userName.errors?.maxLength" class="form-error-messages"
            id="error-maxlength-username">
            {{maxlengthUserName}}
          </div>
          <div *ngIf="loginForm.controls.userName.touched && loginForm.controls.userName.errors?.pattern" class="form-error-messages"
            id="error-pattern-username">
            {{userNamePattern}}
          </div>
        </div>

我在这里做错了什么？ 请指导我

Answer 1

在 ngIf 中将 minLength 更改为 minlength，将 maxLength 更改为 maxlength。 对于模式错误，请使用自定义验证器或仅将 error.invalid 值与消息 e 一起使用。 g：表单值的格式无效。

Answer 2

首先，您的代码中几乎没有小故障，我想说将.touched替换为.dirty以在模板中即时显示表单错误。

对于最大、最小长度错误消息，角度形式没有驼峰模式，其简单的全小写，因此请改用minlength和maxlength 。

完整的模板看起来像。

<form class="ro-form" [formGroup]="loginForm" (ngSubmit)="doLogin()" novalidate>
    <div class="form-group">
      <label class="labelHead" for="username">
        <b>Username</b>
      </label>
      <input type="text" id="username" formControlName="userName" placeholder="username">

      <div *ngIf="loginForm.controls.userName.dirty && loginForm.controls.userName.errors?.required" class="form-error-messages"
        id="error-no-username">
        {{emptyUserName}}
      </div>
      <div *ngIf="loginForm.controls.userName.dirty && loginForm.controls.userName.errors?.minlength" class="form-error-messages"
        id="error-minlength-username">
        {{minlengthUserName}}
      </div>
      <div *ngIf="loginForm.controls.userName.dirty && loginForm.controls.userName.errors?.maxlength" class="form-error-messages"
        id="error-maxlength-username">
        {{maxlengthUserName}}
      </div>
      <div *ngIf="loginForm.controls.userName.dirty && loginForm.controls.userName.errors?.pattern" class="form-error-messages"
        id="error-pattern-username">
        {{userNamePattern}}
      </div>

      {{loginForm.controls.userName.errors | json}} <!-- see errors while typing the input -->
    </div>

工作演示