时间戳

首页 > 解决方案 > Angular 7 & Angular Material - 验证器未显示 MinLength 错误

angular - Angular 7 & Angular Material - 验证器未显示 MinLength 错误

问题描述

我正在使用 Angular 7 和 Angular Material，我的代码存在一个我无法解决的小问题。如果有的话，下一段代码应该返回一个带有我的消息错误的字符串：

    getPasswordErrorMessage() {
        return this.passwordFormControl.hasError('required') ? 'Password is required' :
              this.passwordFormControl.hasError('minLength') ? 'Password must be at least 6 characters long' : '';
    }

它应该显示在mat-error标签之间：

    <mat-form-field>
        <input matInput minlenght="6" type="password" placeholder="Password" [formControl]="passwordFormControl" [errorStateMatcher]="matcher">
        <mat-error *ngIf="passwordFormControl.invalid">
             {{ getPasswordErrorMessage() }}
        </mat-error>
    </mat-form-field>

无论哪种方式，只显示“必填字段”错误。不显示 minLength 错误是否有原因？

标签： angularangular-materialangular-forms

解决方案

这是因为您如何设置返回错误的功能。三元将返回第一个匹配项，而不关心下一个匹配项。

getPasswordErrorMessage() {
   let error = '';
   error = this.passwordFormControl.hasError('required') ? 'Password is required' : '';
   error = this.passwordFormControl.hasError('minLength') && error ? `${error}   * 
  Password must be at least 6 characters long` : this.passwordFormControl.hasError('minLength') ? 'Password must be at least 6 characters long' : ''; 
 return error;
  }

这应该可以解决问题。

推荐阅读