Angular表单：字段触及时执行函数，而非仅值变更时

问题核心在于statusChanges仅在表单控件值或状态（VALID/INVALID）变化时触发，而单纯触碰控件（未修改值）不会改变控件状态（比如必填字段原本就为空、状态已为INVALID），因此无法触发订阅。以下是几种可行的实现方式和最佳实践：

1. 订阅单个控件的touchedChanges事件 #

Angular表单控件提供了touchedChanges Observable，专门用于监听控件触碰状态的变化。你可以遍历所有表单控件，订阅这个事件来触发检查逻辑：

代码实现 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'app-your-form',
  templateUrl: './your-form.component.html'
})
export class YourFormComponent implements OnInit, OnDestroy {
  formUser: FormGroup;
  private destroy$ = new Subject<void>(); // 用于清理订阅，避免内存泄漏

  ngOnInit(): void {
    // 假设你的表单初始化逻辑在这里
    this.formUser = new FormGroup({
      email: new FormControl('', [...]),
      password: new FormControl('', [...])
    });

    // 遍历所有控件，订阅触碰状态变化
    Object.values(this.formUser.controls).forEach(control => {
      control.touchedChanges
        .pipe(takeUntil(this.destroy$))
        .subscribe(() => {
          const result = this.getAllErrorsTouched();
          console.log(result);
          // 这里可以更新视觉反馈的状态变量，比如控制提交按钮禁用状态
        });
    });
  }

  getAllErrorsTouched(): boolean {
    // 简化逻辑：所有控件要么有效，要么无效但已被触碰
    return Object.values(this.formUser.controls).every(control => {
      return !control.invalid || control.touched;
    });
  }

  ngOnDestroy(): void {
    // 清理订阅
    this.destroy$.next();
    this.destroy$.complete();
  }
}

2. 模板层直接处理单控件反馈（最佳实践） #

如果只是针对单个字段显示错误提示，Angular官方推荐直接在模板中结合invalid和touched状态判断，无需全局函数：

<!-- 邮箱字段示例 -->
<div class="form-group">
  <label>邮箱</label>
  <input type="email" formControlName="email" />
  <div *ngIf="formUser.get('email')?.invalid && formUser.get('email')?.touched" class="error-text">
    请输入有效的邮箱地址
  </div>
</div>

这种方式更直观，无需额外订阅逻辑，是表单错误反馈的常规写法。

3. 全局状态控制（比如提交按钮） #

如果需要全局判断（比如控制提交按钮是否可用），可以结合上述touchedChanges订阅，维护一个组件内的状态变量：

isAllInvalidTouched = false;

// 在touchedChanges订阅中更新状态
control.touchedChanges.subscribe(() => {
  this.isAllInvalidTouched = this.getAllErrorsTouched();
});

模板中直接使用这个变量：

<button type="submit" [disabled]="!isAllInvalidTouched">提交</button>

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