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

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

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

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

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

当用户将 select 框值改回默认值时，如何在不单击提交按钮的情况下重置为原始状态？

Angular 版本：8.2.14.

更新

遗憾的是，当用户将 UI 更改为默认值时，angular 似乎没有将表单状态更改为原始状态。

所以我们必须编写代码来进行数据比较并将表单标记为原始状态。

Answer 1

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

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

功能参考以下代码：

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

并在 html 中添加以下行

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

Answer 2

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

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

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

Angular reactive forms - does pristine reset when the user reverts the UI changes to original values?

angular

angular8

更新