Angular响应式表单：恢复原值时pristine状态不重置的解决方案

我完全懂你遇到的这个痛点——用registrationForm.pristine控制提交按钮的禁用状态，修改值时按钮能正常启用，但改回初始值后按钮还是亮着，只有点了提交才会变回禁用。这其实是因为你对Angular表单的pristine状态的理解有点偏差，咱们一步步来解决：

为什么pristine不会自动重置？ #

pristine这个状态的核心是标记表单是否被用户触碰过，而不是表单值是否和初始值一致。只要用户和表单控件发生过交互（比如点开下拉框选过选项），pristine就会从true变成false，哪怕后来你把值改回原样，Angular也不会自动把它改回true——它只关心“有没有被碰过”，不关心“值对不对”。

解决方案：手动对比值来更新pristine状态 #

要实现“值和初始一致时禁用按钮”的需求，我们需要自己监听表单值的变化，对比当前值和初始值，然后手动修改表单的状态。

步骤1：修改组件逻辑，添加值监听 #

首先得把初始表单值存一份深拷贝，避免后续表单值变化影响我们的对比基准，然后监听值变化做对比：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
 selector: 'app-registration-form',
 templateUrl: './registration-form.component.html',
 styleUrls: ['./registration-form.component.scss']
})
export class RegistrationFormComponent implements OnInit {
 public registrationForm: FormGroup;
 public formValues = { gender: 1 };
 private initialFormValues: { gender: number }; // 存储初始值的深拷贝

 constructor(private formBuilder: FormBuilder) {}

 ngOnInit(): void {
  // 深拷贝初始值，防止后续修改formValues影响对比
  this.initialFormValues = JSON.parse(JSON.stringify(this.formValues));
  this.registrationForm = this.formBuilder.group(this.formValues);

  // 监听表单值变化，动态更新pristine状态
  this.registrationForm.valueChanges.subscribe(currentValues => {
    // 简单对象用JSON.stringify对比足够，复杂对象可以用递归或第三方库深对比
    const isSameAsInitial = JSON.stringify(currentValues) === JSON.stringify(this.initialFormValues);
    
    if (isSameAsInitial) {
      // 值和初始一致，手动标记表单为pristine和untouched
      this.registrationForm.markAsPristine();
      this.registrationForm.markAsUntouched();
    } else {
      // 值不一致，确保表单为dirty状态（可选，交互后默认已是dirty，但保险起见）
      this.registrationForm.markAsDirty();
    }
  });
 }

 onSubmit(formData) {
  console.log('Your form is submitted', formData);
  this.registrationForm.reset(this.formValues);
  // 提交后手动重置表单状态
  this.registrationForm.markAsPristine();
  this.registrationForm.markAsUntouched();
 }
}

步骤2：模板保持不变 #

你的模板代码无需修改，依旧用[disabled]="registrationForm.pristine"控制按钮状态：

<form class="registration-form" [formGroup]="registrationForm" (ngSubmit)="onSubmit(registrationForm.value)">
 <div>
 <label for="gender">Gender</label>
 <select id="gender" formControlName="gender">
 <option value=1>female</option>
 <option value=2>male</option>
 <option value=3>do not specify</option>
 </select>
 </div>
 <input type="submit" [disabled]="registrationForm.pristine">
</form>

补充说明 #

• 如果你的表单是复杂结构（比如嵌套FormGroup、包含日期类型），JSON.stringify的对比方式可能不准确，这时候可以写递归对比对象的方法，或者引入lodash的isEqual做深对比。
• markAsUntouched是可选操作，但通常pristine和untouched配套使用，一起标记能让表单状态更完整。

这样修改后，当你把下拉框切回female（初始值）时，表单会自动变回pristine状态，提交按钮也会随之禁用，完全符合你的需求！

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