Angular 12响应式表单：任意输入值变更时启用保存按钮

核心方案：利用FormGroup的valueChanges Observable #

不用给每个输入框单独绑定(input)事件，直接监听整个表单组的值变化，一键控制保存按钮的禁用状态。

步骤1：组件类实现 #

在组件的ngOnInit中初始化表单后，订阅表单的valueChanges，同时管理按钮的禁用状态：

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

@Component({
  selector: 'app-profile-info',
  templateUrl: './profile-info.component.html',
  styleUrls: ['./profile-info.component.css']
})
export class ProfileInfoComponent implements OnInit, OnDestroy {
  profileInfoForm: FormGroup;
  isSaveDisabled = true; // 默认禁用保存按钮
  private destroy$ = new Subject<void>(); // 用于取消订阅，避免内存泄漏

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化响应式表单
    this.profileInfoForm = this.fb.group({
      firstName: [''],
      lastName: [''],
      email: ['']
      // 可添加其他表单控件
    });

    // 监听表单值变化
    this.profileInfoForm.valueChanges
      .pipe(takeUntil(this.destroy$)) // 组件销毁时取消订阅
      .subscribe(() => {
        this.isSaveDisabled = false; // 任意输入变更后启用按钮
      });
  }

  submitProfileInfoForm(): void {
    // 表单提交逻辑
    console.log(this.profileInfoForm.value);
  }

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

步骤2：模板修改 #

在模板中给保存按钮绑定禁用状态：

<form [formGroup]="profileInfoForm" (ngSubmit)="submitProfileInfoForm()">
  <input class="form-control" type="text" formControlName="firstName" name="firstName">
  <input class="form-control" type="text" formControlName="lastName" name="lastName">
  <input class="form-control" type="email" formControlName="email" name="email">
  <!-- 可添加其他输入框 -->
  
  <button type="submit" class="btn btn-primary" [disabled]="isSaveDisabled">保存</button>
</form>

额外优化：判断表单是否真的有变更 #

如果需要区分“表单值是否和初始值不同”（避免用户输入后又改回原值时按钮仍启用），可以在初始化表单时保存初始值，然后在valueChanges中对比：

ngOnInit(): void {
  this.profileInfoForm = this.fb.group({
    firstName: [''],
    lastName: [''],
    email: ['']
  });

  // 保存表单初始值
  const initialFormValue = this.profileInfoForm.value;

  this.profileInfoForm.valueChanges
    .pipe(takeUntil(this.destroy$))
    .subscribe(currentValue => {
      // 对比当前值和初始值，判断是否真的有变更
      this.isSaveDisabled = JSON.stringify(currentValue) === JSON.stringify(initialFormValue);
    });
}

这个优化能确保只有当表单值真正偏离初始状态时，按钮才会启用，更贴合实际业务场景。

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