Angular 13应用升级后页面加载时即显示验证消息问题求助

可能原因及修复方案 #

1. 调整表单控件的updateOn配置 #

Angular 13 对表单控件的默认更新策略有调整，若未显式设置updateOn，默认触发时机可能从blur/submit变为change，导致页面加载时就触发验证。

修复方式：定义表单控件时显式指定更新时机：

// 响应式表单示例
this.myForm = this.fb.group({
  username: ['', {
    validators: [Validators.required],
    updateOn: 'blur' // 可选值：'blur'/'submit'
  }]
});

2. 修改验证消息的显示条件 #

确保验证消息仅在控件**被触碰（touched）且无效（invalid）**时显示，而非仅判断invalid状态：

<!-- 错误写法 -->
<div *ngIf="myForm.get('username').invalid">请输入用户名</div>

<!-- 正确写法 -->
<div *ngIf="myForm.get('username').invalid && myForm.get('username').touched">请输入用户名</div>

结合表单提交状态的优化写法：

<form #myForm="ngForm" (ngSubmit)="onSubmit()">
  <input name="username" ngModel required>
  <div *ngIf="myForm.controls.username.invalid && (myForm.controls.username.touched || myForm.submitted)">
    请输入用户名
  </div>
  <button type="submit">提交</button>
</form>

3. 重置表单初始状态 #

Angular 13 中AbstractControl的touched状态判定逻辑有细微调整，可能导致初始状态被误标记。可在组件初始化时手动重置：

ngOnInit() {
  this.myForm.markAsUntouched();
  this.myForm.markAsPristine();
}

4. 排查自定义验证器 #

若使用自定义验证器，检查是否在控件初始化时就返回错误状态，确保仅在符合触发条件时返回验证错误：

// 错误示例：初始化直接返回错误
export function customValidator(control: AbstractControl): ValidationErrors | null {
  return { customError: true };
}

// 正确示例
export function customValidator(control: AbstractControl): ValidationErrors | null {
  if (!control.value || control.pristine) {
    return null; // 未输入或未触碰时不返回错误
  }
  return control.value.length < 5 ? { minLength: true } : null;
}

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