Angular 11 Material表单字段单行展示正则校验错误及报错不显示问题

正则校验错误不显示问题修复 #

你当前的错误提示判断逻辑仅覆盖了required必填校验场景，未匹配pattern正则校验失败的场景，因此正则校验不通过时不会渲染错误提示。调整*ngIf判断逻辑，同时支持两种错误场景的提示即可解决。

错误提示单行展示实现 #

给错误提示标签添加强制不换行的CSS样式即可实现单行展示效果，多余内容可按需配置省略号显示。

修正后模板代码 #

<mat-form-field class="form-element">
  <input matInput id="password1" placeholder="New password" formControlName="password1">            
  <label 
    class="error-tip"
    *ngIf="resetPasswordForm.get('password1').errors && (resetPasswordForm.get('password1').dirty || resetPasswordForm.get('password1').touched)"
  >
    <ng-container *ngIf="resetPasswordForm.get('password1').hasError('required')">请输入密码</ng-container>
    <ng-container *ngIf="resetPasswordForm.get('password1').hasError('pattern')">密码需包含至少1个数字、大小写字母及特殊字符，长度为8-16位</ng-container>
  </label>
</mat-form-field>

优化后表单校验代码 #

正则去除了重复声明的特殊字符，规则保持和原有需求一致：

resetPasswordForm = this.formBuilder.group({
  password1: ['',[ 
    Validators.required, 
    Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=[^A-Z]*[A-Z])(?=.*[$@!%*?&()]).{8,16}$/) 
  ]],
  password2: ['',[ 
    Validators.required, 
    Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=[^A-Z]*[A-Z])(?=.*[$@!%*?&()]).{8,16}$/) 
  ]],
})

新增CSS样式 #

.error-tip {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f44336;
  font-size: 12px;
  margin-top: 4px;
}

如果使用Angular Material自带的<mat-error>组件替代自定义label，可自动适配Material设计规范的单行错误样式，无需额外写强制换行的CSS。

内容的提问来源于stack exchange，提问作者Peter Marynowski