Angular react 形式 - 当用户将 UI 更改恢复为原始值时，原始值是否会重置？

Question

我只想在表单输入更改时启用表单中的提交按钮。
当表单控件值未更改时，应禁用提交按钮。
我尝试使用 FormGroup.pristine启用/禁用提交按钮的标志。
它适用于启用按钮。
但是，它不会重置为 true当 UI 中的值更改回其原始值时。
组件代码:

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

@Component({
  selector: 'app-registration-form',
  templateUrl: './registration-form.component.html',
  styleUrls: ['./registration-form.component.scss']
})
export class RegistrationFormComponent {
  public registrationForm;
  public formValues = {
      gender: 1,
    };

  constructor(private formBuilder: FormBuilder) {
    this.registrationForm = formBuilder.group(this.formValues);
  }

  onSubmit(formData) {
    console.log('Your form is submitted', formData);
    this.registrationForm.reset(this.formValues);
  }
}

<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>

默认情况下，在选择框中选择“女性”选项。
例如，当用户将其更改为“男性”时，将启用“提交”按钮。
现在，当用户再次选择“女性”时，提交按钮不会被禁用。
用户必须单击提交按钮才能恢复原始状态并禁用该按钮。
当用户将选择框值改回默认值而不单击“提交”按钮时，如何重置为原始状态？
Angular 版本: 8.2.14 .
更新
遗憾的是，当用户将 UI 更改为默认值时，angular 似乎并没有将表单状态更改为原始状态。
所以我们必须编写代码来进行数据比较并将表单标记为原始状态。

Answer 1

您可以使用 markAsPristine 将原始状态设置为 true 的方法，当数据更改回 defaultValue 时，如下所示:

ngOnInit() {
    const defaultValue = this.registrationForm.value;
    this.registrationForm.valueChanges
      .pipe(debounceTime(200))
      .subscribe(value => {
        if (JSON.stringify(defaultValue) == JSON.stringify(value)) {
          this.registrationForm.markAsPristine();
        }
      });
  }