如何设置Angular响应式表单仅在回车或点击按钮时触发校验

核心思路 #

放弃依赖Angular默认的blur/change/submit自动校验触发逻辑，通过自定义变量控制错误提示的显隐，仅在回车键按下、按钮点击两个指定时机手动触发校验，完全掌握校验流程。

代码实现 #

1. TypeScript逻辑调整 #

import { Component } from '@angular/core';
import { FormBuilder, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 自定义错误提示显示开关，初始为false不显示错误
  empTopicSubmitted = false;

  empForm = this.fb.group({
    empTopic: ['', [Validators.required]]
  })

  // 快捷获取表单控件
  get empTopic(): FormControl {
    return this.empForm.get('empTopic') as FormControl;
  }

  constructor(private fb: FormBuilder) {}

  // 回车事件处理
  handleKeyUp(event: KeyboardEvent) {
    if (event.key === 'Enter') {
      event.preventDefault();
      this.runValidate();
    }
  }

  // 按钮点击事件处理
  onAddEmpTopic(event: Event) {
    event.preventDefault();
    this.runValidate();
  }

  // 统一校验逻辑
  private runValidate() {
    // 开启错误提示显示权限
    this.empTopicSubmitted = true;
    // 手动触发控件校验更新状态
    this.empTopic.updateValueAndValidity();
    // 校验通过后执行业务逻辑
    if (this.empForm.valid) {
      console.log('提交内容：', this.empTopic.value);
      // 提交完成后重置表单和状态（按需保留）
      this.empForm.reset();
      this.empTopicSubmitted = false;
    }
  }
}

2. 模板文件调整 #

原有模板无需大幅修改，保持现有mat-error的判断逻辑即可，错误只会在empTopicSubmitted为true时才显示，完全规避失焦自动触发错误的问题：

<form [formGroup]="empForm">
  <mat-form-field appearance="standard">
    <mat-label>Add a topic</mat-label>
    <input
      matInput
      placeholder="I wish to discuss..."
      (keyup)="handleKeyUp($event)"
      formControlName="empTopic"
    />
    <mat-error *ngIf="empTopic.errors?.required && empTopicSubmitted">
      Topic must not be empty.
    </mat-error>
  </mat-form-field>
  <button mat-button (click)="onAddEmpTopic($event)">
    <mat-icon>note_add</mat-icon>
  </button>
</form>

旧方案踩坑原因说明 #

之前配置updateOn: 'submit'后提交时校验不生效，是因为使用的按钮是普通按钮，没有设置type="submit"，点击时不会触发Angular表单的默认提交事件，所以表单不会自动执行校验更新状态。本方案通过手动调用updateValueAndValidity()主动触发校验，彻底解决这个问题。

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