Angular 反应形式 - 当用户将 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>

默认情况下，在选择框中选择“女性”选项。

例如，当用户将其更改为“男性”时，将启用“提交”按钮。

现在，当用户再次选择“女性”时，提交按钮不会被禁用。

用户必须单击提交按钮才能恢复原始状态并禁用该按钮。

当用户将选择框值改回默认值而不单击“提交”按钮时，如何重置为原始状态？

角度版本：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();
        }
      });
  }