Angular响应式表单：如何仅在statusChanges状态变更时触发一次订阅

你可以使用RxJS的distinctUntilChanged操作符过滤重复的状态值，该操作符会对比当前发射值与上一次发射值，仅当两者不相等时才会将值传递给下游订阅，完全匹配你的需求。

实现步骤 #

1. 导入所需操作符

import { distinctUntilChanged } from 'rxjs/operators';

2. 修改原有订阅逻辑

this.form.statusChanges
  .pipe(
    // 过滤与上一次状态相同的重复值
    distinctUntilChanged()
  )
  .subscribe((status) => {
    console.log(status); // 仅在表单状态与上一次不一致时触发
  });

补充说明 #

• 表单的状态返回值为固定的四种字符串：'VALID'、'INVALID'、'PENDING'、'DISABLED'，distinctUntilChanged默认的全等对比逻辑可直接适配该场景，无需自定义对比函数。
• 如果你需要在表单值变化（valueChanges触发）时才校验状态变更，可结合combineLatest操作符实现：

import { combineLatest } from 'rxjs';
import { distinctUntilChanged, map } from 'rxjs/operators';

combineLatest([
  this.form.valueChanges,
  this.form.statusChanges
]).pipe(
  map(([formValue, formStatus]) => formStatus),
  distinctUntilChanged()
).subscribe(status => {
  // 仅当表单值更新且状态与上一次不一致时触发
  console.log(status);
});

• 若需要在订阅时立即获取一次表单初始状态，可在pipe中添加startWith(this.form.status)操作符。

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