Angular中如何检查FormGroup是否有控件值变更？是否有相关属性？

嘿，这个需求在Angular开发里太常见了！我给你整理几种实用的方法，看哪种适合你的场景：

Angular的FormGroup自带了valueChanges这个Observable，只要表单里任何一个控件的值发生变化，它就会触发回调。这适合你需要实时响应用户修改的场景，比如实时更新状态、做校验提示等。

示例代码：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit, OnDestroy {
  yourFormGroup: FormGroup;
  private unsubscribe$ = new Subject<void>();
  formHasChanged = false;

  constructor(private fb: FormBuilder) {
    // 初始化你的15个控件的FormGroup
    this.yourFormGroup = this.fb.group({
      // 这里是你的控件定义，比如：
      username: [''],
      role: ['']
      // ...其他13个控件
    });
  }

  ngOnInit(): void {
    // 监听表单值变更
    this.yourFormGroup.valueChanges
      .pipe(
        skip(1), // 跳过初始加载时的第一次触发（可选）
        takeUntil(this.unsubscribe$) // 组件销毁时取消订阅，避免内存泄漏
      )
      .subscribe(changes => {
        this.formHasChanged = true;
        console.log('用户修改了表单，变更内容:', changes);
        // 这里可以加你的业务逻辑，比如启用保存按钮、提示用户未保存等
      });
  }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}

如果你只是想知道用户是否曾经修改过任意控件，不需要实时监听，那FormGroup的dirty属性简直是懒人福音！它是一个布尔值：

• 初始状态下，表单是pristine（未修改）状态
• 只要用户修改过任何一个控件的值，整个FormGroup的dirty就会变成true

示例用法：

在组件代码里判断： #

if (this.yourFormGroup.dirty) {
  console.log('表单已经被修改过了');
  // 比如提示用户保存，或者启用提交按钮
}

在模板里直接用： #

<button type="submit" [disabled]="!yourFormGroup.dirty">保存修改</button>

注意：如果用户修改了控件值又改回原值，dirty依然会是true——它只记录“是否被修改过”，不关心最终值和初始值是否一致。

如果你的需求是：只有当用户修改后的值和初始值不一样时，才判定为变更（比如用户改了又改回原值不算），那可以保存表单的初始值，之后对比当前值。

示例代码：

import { FormBuilder } from '@angular/forms';

// ...组件其他代码
private initialFormValue: any;

constructor(private fb: FormBuilder) {
  this.yourFormGroup = this.fb.group({/* 控件定义 */});
  // 保存初始值，用getRawValue()会包含禁用的控件，用value()则不会，按需选择
  this.initialFormValue = this.yourFormGroup.getRawValue();
}

// 当需要判断时调用这个方法
checkIfFormHasChanges(): boolean {
  const currentValue = this.yourFormGroup.getRawValue();
  // 用Angular的FormBuilder自带的compare方法做深对比
  return !this.fb.compare(this.initialFormValue, currentValue);
}

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