Angular表单需求：仅点击提交时验证，输入时重置验证状态

核心修改思路 #

1. 新增提交状态标记，控制验证错误的显示时机
2. 替换输入事件类型，确保输入时实时重置验证状态
3. 修正验证重置逻辑，正确恢复控件的初始状态

修改后的组件代码 #

// 新增提交状态标记
isSubmitted = false;

addUser() {
  // 标记表单已提交
  this.isSubmitted = true;
  
  if (this.userForm.valid) {     
    // 表单有效时的业务逻辑
  } else {
    Object.keys(this.userForm.controls).forEach(field => {
      const control = this.userForm.get(field);
      control?.markAsDirty({ onlySelf: true });
      control?.updateValueAndValidity();
    });
  }
}

clearValidation(name: string) {
  const control = this.userForm.get(name);
  if (control) {
    // 重置控件为未修改、未触碰状态
    control.markAsPristine();
    control.markAsUntouched();
    // 更新控件验证状态，不触发外部事件
    control.updateValueAndValidity({ onlySelf: true, emitEvent: false });
  }
}

修改后的模板代码 #

<form [formGroup]="userForm" novalidate>
  <div class="field">
    <label for="firstName" class="block">First Name</label>
    <input
      type="text"
      pInputText
      placeholder="First Name"
      <!-- 替换为input事件，实时响应输入操作 -->
      (input)="clearValidation('firstName')"
      <!-- 仅在提交后且控件无效+已修改时显示错误样式 -->
      [ngClass]="{'required': isSubmitted && !userForm.controls['firstName'].valid && userForm.controls['firstName'].dirty}"
      formControlName="firstName"
    />
  </div>
  <button pButton (click)="addUser()" label="Submit"></button>
</form>

逻辑说明 #

• 提交状态标记isSubmitted：只有点击提交按钮后才会触发错误样式的显示，避免输入过程中自动出现验证错误。
• input事件替换change：用户开始输入的瞬间就重置验证状态，而不是等到输入框失去焦点才触发。
• 重置函数修正：原代码用markAsDirty会让控件保持“已修改”状态，改为markAsPristine和markAsUntouched能彻底恢复控件的初始验证状态，配合updateValueAndValidity确保状态实时更新。

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