Question

我正在使用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错误没有显示的原因吗？

Answer 1

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

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

这应该可以解决问题。

角度7和角度材料-验证器未显示MinLength错误

1 个答案: