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

Question

我只想在表单输入发生变化时启用表单中的提交按钮。

提交按钮应在表单控件值未更改时禁用。

我尝试使用FormGroup.pristine 标志来启用/禁用提交按钮。

启用按钮效果很好。

但是，当 UI 中的值更改回其原始值时，它不会重置为 true。

组件代码：

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

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

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

Answer 2

如果没有任何更改，您可以创建一种返回 true 或 false 的方法来禁用提交按钮。

假设您有一些用于存储表单输入的对象。

函数参考以下代码：

oldObj = _.cloneDeep(this.obj)
dataChanged(){
 return !_.isEqual(this.oldObj, this.obj)
}

并在 html 中添加以下行

<input type="submit" [disabled]="!hasChanged()">