Angular 13多表单页面中监听表单有效状态实际变更的方案咨询

这个问题我之前在Angular项目里也遇到过——statusChanges确实会比我们预期的更频繁触发，因为它不仅监听valid/invalid的变化，只要表单的任何状态属性（比如dirty、touched）改变都会发出通知，哪怕有效性根本没变。不过不用手动每次检查状态，我们可以用RxJS的操作符轻松过滤出真正的有效性变化事件。

核心思路：过滤重复的状态值 #

我们可以在订阅statusChanges时，跟踪之前的表单状态，只在当前状态和之前状态不一致时才处理逻辑。这样就能确保只有当表单从有效变无效，或者无效变有效时，才会调用你的页面有效性服务方法。

具体实现（响应式表单为例） #

在你的表单组件里，添加一个变量保存之前的状态，然后用filter操作符过滤掉重复的状态：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { filter, tap, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { PageValidityService } from './page-validity.service';

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

  constructor(private pageValidityService: PageValidityService) {}

  ngOnInit(): void {
    // 初始化保存初始状态
    this.previousStatus = this.formGroup.status;

    // 先根据初始状态注册到服务
    if (this.previousStatus === 'INVALID') {
      this.pageValidityService.addInvalidForm(this.formGroup);
    }

    this.formGroup.statusChanges.pipe(
      // 只保留状态变化的事件
      filter(status => status !== this.previousStatus),
      // 更新保存的状态
      tap(status => this.previousStatus = status),
      // 组件销毁时取消订阅
      takeUntil(this.destroy$)
    ).subscribe(status => {
      if (status === 'INVALID') {
        this.pageValidityService.addInvalidForm(this.formGroup);
      } else {
        this.pageValidityService.removeInvalidForm(this.formGroup);
      }
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时，记得把表单从服务中移除（避免内存泄漏）
    this.pageValidityService.removeInvalidForm(this.formGroup);
    this.destroy$.next();
    this.destroy$.complete();
  }
}

模板驱动表单的处理方式 #

如果是模板驱动表单，只需要通过@ViewChild获取NgForm实例，逻辑和上面完全一致：

import { ViewChild, NgForm } from '@angular/core';

// 在组件类里
@ViewChild(NgForm) form: NgForm;

ngOnInit(): void {
  this.previousStatus = this.form.status;
  // 后续的订阅逻辑和响应式表单一样，替换this.formGroup为this.form即可
}

优化：封装自定义RxJS操作符 #

如果多个组件都需要这个逻辑，可以把状态过滤的逻辑封装成一个自定义操作符，复用起来更方便：

// 创建一个rxjs操作符文件，比如distinct-status.operator.ts
import { OperatorFunction } from 'rxjs';
import { filter, tap } from 'rxjs/operators';

export function distinctStatus<T extends string>(): OperatorFunction<T, T> {
  let previousStatus: T;
  return source => source.pipe(
    filter(status => status !== previousStatus),
    tap(status => previousStatus = status)
  );
}

然后在组件里直接使用：

import { distinctStatus } from './distinct-status.operator';

// 订阅时替换filter和tap为自定义操作符
this.formGroup.statusChanges.pipe(
  distinctStatus(),
  takeUntil(this.destroy$)
).subscribe(status => {
  // 处理服务的添加/移除逻辑
});

页面有效性服务的补充建议 #

你的服务可以用BehaviorSubject来维护无效表单集合，对外暴露一个valid$可观察对象，这样提交按钮可以直接绑定：

// page-validity.service.ts
import { Injectable } from '@angular/core';
import { FormGroup, NgForm } from '@angular/forms';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class PageValidityService {
  private invalidForms = new Set<FormGroup | NgForm>();
  private invalidForms$ = new BehaviorSubject<Set<FormGroup | NgForm>>(this.invalidForms);

  // 对外暴露的整体有效性可观察对象
  valid$: Observable<boolean> = this.invalidForms$.pipe(
    map(forms => forms.size === 0)
  );

  addInvalidForm(form: FormGroup | NgForm): void {
    this.invalidForms.add(form);
    this.invalidForms$.next(this.invalidForms);
  }

  removeInvalidForm(form: FormGroup | NgForm): void {
    this.invalidForms.delete(form);
    this.invalidForms$.next(this.invalidForms);
  }
}

提交按钮的模板代码：

<footer>
  <button type="submit" [disabled]="!(pageValidityService.valid$ | async)">提交</button>
</footer>

这样整个流程就非常清晰，而且完全避免了不必要的服务调用，只有当表单有效性真正变化时才会触发状态更新。

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