Angular 2 Reactive Form - 仅当表单变脏时显示重置按钮

Question

我有一个反应式表单，我想显示一个重置按钮，它将表单值重置为初始值。

现在，只有在 表单脏了时才会显示按钮。

表单定义为：

this.form = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl('')
});

我尝试过的第一种方法是使用 Reactive 形式的 form.dirty 属性，但这不是我需要的。 form.dirty returns true 用户在inputs中输入内容，然后删除，表单控件的值与initial相同的场景

第二种方法是保存初始值：this.initialFormValue = this.form.value;，然后实现一个自定义函数，将当前表单值与初始值进行比较：

isFormDirty(): boolean {
   return JSON.stringify(this.initialFormValue) !== JSON.stringify(this.form.value);
}

（比较不是很聪明，也许我会使用一些Lodash功能等，但这不是问题的重点）。

<div *ngIf="isFormDirty()" style="color: red;">Form is really dirty</div>

它有效，但是该函数被调用非常频繁（当 Angular 检测到更改或其他内容时），我认为我可能有一些性能问题。

我想我可能会使用 valueChanges observable，并发出一个新值...

您还有其他建议吗？

堆栈闪电战： https://stackblitz.com/edit/angular-jywynt

谢谢。

Answer 1

是的，您可以收听 valueChanges Observable，您可以控制执行的频率，例如，您可以使用 debounceTime 来减少调用。

this.form.valueChanges
 .pipe(debounceTime(50))
 .subscribe(newValue => {
   if (this.isFormDirty()) {
     this.form.markAsDirty();
   } else {
     this.form.markAsPristine();
   }
 });

现在您可以简单地使用来自 FormGroup 对象的相同属性 form.dirty：

<div *ngIf="form.dirty" style="color: red;">Form is really dirty</div>
<div *ngIf="!form.dirty">Form is not dirty (values are identical to initial)</div>

Forked Stackblitz

Angular 2 Reactive Form - 仅当表单变脏时显示重置按钮

Angular 2 Reactive Form - Display a reset button only if form is dirty

angular2-forms

angular