Angular 2 Reactive Form - Отображать кнопку сброса, только если форма грязная

Question

У меня есть реактивная форма, и я хочу отобразить кнопку сброса, которая сбросит значения формы до начальных.

Теперь кнопка должна появляться, только если форма грязная .

Определение формы:

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

Первый подход, который у меня есть попытался с помощью свойства form.dirty формы Reactive, но это не то, что мне нужно. form.dirty возвращает true в сценарии, когда пользователь вводит что-то во входные данные, затем удаляет его, и элементы управления формой имеют то же значение, что и исходные.

Второй подход заключается в сохранении начальных значений: this.initialFormValue = this.form.value;, затем реализуйте пользовательскую функцию, которая сравнивает текущее значение формы с исходным:

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

(сравнение не очень умное, возможно, я воспользуюсь некоторой функцией Loda sh, et c, но не в этом вопрос).

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

Работает, но функция вызывается очень и очень часто (когда Angular обнаруживает изменения или что-то в этом роде), и я думаю, что у меня могут быть некоторые проблемы с производительностью.

Я думаю, что я мог бы использовать valueChanges observable и выдать новое значение ...

У вас есть другие предложения?

Stackblitz: https://stackblitz.com/edit/angular-jywynt

Спасибо.

Answer 1

Да, вы можете слушать valueChanges Наблюдаемый, где вы можете контролировать, как часто он должен выполняться, например, вы можете использовать debounceTime для сокращения вызовов.

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

Теперь вы можете просто использовать то же свойство form.dirty из FormGroup объект:

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

Разветвленный стек Блиц