Уведомление о событии сброса формы?

Question

Есть ли способ получить уведомление при сбросе формы с помощью метода formReset?

У меня есть директива, которая вводит форму, и я могу получать уведомления при отправке или сбросе формы с помощью кнопки сбросано я не могу найти способ получить уведомление при вызове formRest для ngForm.

@Directive({
  selector: '[appForm]'
})
export class FormDirective implements OnDestroy {
  private subscription: Subscription;

  constructor(form: NgForm) {
    this.subscription = form.ngSubmit.subscribe(() => {
      console.log('submitted');
    });
    form.onReset = () => {
      console.log('reset');
    };
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

Используя директиву типа

<form appForm #form="ngForm">
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
  <button type="button" (click)="form.resetForm()">Angular reset</button>
</form>

Есть ли способ уведомить мою директиву о том, что resetFormметод был вызван?

Демонстрация в StackBlitz https://stackblitz.com/edit/angular-adymlf?file=src/app/form.directive.ts

Answer 1

Исходя из события w3schools onReset , событие "сброса" запускается только при <input type="reset">. Это, вероятно, поведение по умолчанию в браузерах.

Angular's resetForm() и reset() фактически не вызывают событие сброса. Это просто программно вернуть значения формы. resetForm() позволяет вам сбросить представленный статус угловой формы, а также определить начальные значения для формы, в которую нужно сбросить, передавая объект, подобный этому: resetForm({}).

Это можно доказать, добавив@HostListener('reset') в вашей директиве атрибута для прослушивания событий сброса. Когда form.resetForm() и form.reset() вызваны (или, скорее, нажаты), событие сброса не запускается вообще.

---

Прослушивание щелчков в Директивах атрибутов для кнопок

Для работывокруг этого вы можете просто использовать <button type="reset">? Но если он не подходит вашему варианту использования, и вам нужно использовать <button type="button"> и все же обнаруживать событие сброса, то вы, вероятно, можете добавить еще один @HostListener для прослушивания событий нажатия для кнопок ввода типа:

@HostListener('click', ['$event.target']) onFormClick(btn: HTMLButtonElement){
  // console.log(btn)
  if(btn.type == "button"){
    console.log("detected click event on 'Angular reset' button, triggering reset event!");
    this.form.onReset();
  }
}

---

Определение, когда вызывается метод resetForm () от NgForm (EDIT)

//to store original resetForm()
resetFormFunc;

constructor(private form: NgForm, private elRef: ElementRef) {

   ...

   this.resetFormFunc = form.resetForm; //assigning resetForm function to "store" it.

   //"Override" resetForm(), and call original resetForm() in the middle
   form.resetForm = () => {
     console.log("detected calling of resetForm()!");
     this.resetFormFunc.apply(form, arguments); //actually call form.resetForm()
     console.log("my additional code");
   }
}

При нажатии «Угловой сброс»:

# 2 Forked Stackblitz ⚡

Надеюсь, это поможет!