Angular 8中matInput输入框验证错误实时显示问题咨询

没错，这确实是Angular 8（包括更早的Angular版本）模板驱动表单的默认行为——默认情况下，验证错误只会在控件**失焦（blur）**或者表单提交时才会触发显示。这是因为Angular默认将表单控件的验证触发时机和状态更新绑定到了blur事件，同时mat-error的显示逻辑通常也会关联控件的touched（已触碰）状态，而这个状态只有在控件失去焦点后才会变为true。

如果你想实现输入时立即显示验证错误，可以通过以下两步修改：

1. 调整验证触发时机 #

给你的输入框添加ngModelOptions配置，指定验证在内容变化（change）时立即执行，而不是等失焦：

<input matInput type="text" placeholder="Last Name" name="user_last_name" 
       [(ngModel)]="user_last_name" 
       [ngModelOptions]="{ updateOn: 'change' }"
       pattern="^[a-zA-Z0-9].*" minlength="3" required>

2. 修改错误显示条件 #

调整mat-error的判断逻辑，让它在控件已输入内容（dirty状态）且验证不通过时就显示，同时修正你代码里的</materror>拼写错误（应该是</mat-error>），还可以针对不同错误类型显示对应的提示：

<mat-error *ngIf="adduser.controls['user_last_name']?.invalid && adduser.controls['user_last_name']?.dirty">
  <span *ngIf="adduser.controls['user_last_name']?.errors?.required">This field is required</span>
  <span *ngIf="adduser.controls['user_last_name']?.errors?.pattern">Only letters and numbers are allowed</span>
  <span *ngIf="adduser.controls['user_last_name']?.errors?.minlength">Minimum length is 3 characters</span>
</mat-error>

这样修改后，用户在输入框中每输入一个字符，验证都会实时执行，对应的错误提示也会立刻显示出来，不用等到失焦。

内容的提问来源于stack exchange，提问作者Chethan Gs