Listen to blur event on a whole FormGroup in a reactive form

Question

I am creating a large form, and I want to fire a notification and save data, each time the user exits a field (on blur). The problem is that I cannot find an observable for that event for the whole FormGroup. I now listen for value change, but that of course emits all the time. Example:

this.myForm.valueChanges.subscribe(() => {
    this.saveFormData();
    this.emitSaveNotification();
});

Controllers does not have any way of listening to blur neither, so I cannot loop this.myForm.controls to add a subscription to the blur event.

Do I have to add a event listener to each element individually?

Answer 1

A solution could be to add on the form the option {updateOn: 'blur'}

<form [ngFormOptions]="{updateOn: 'blur'}">

That will make that the value change will be triggered only when the user blur an input, not on every change, using this with your code should work

this.myForm.valueChanges.subscribe(() => {
     this.saveFormData();
     this.emitSaveNotification();
});

Edit 1 You can also add the updateOn option on the FormGroup creation if you are using model driven form:

this.nameForm = new FormGroup ({
    onecontrol: new FormControl('', ),
    othercontrol: new FormControl('', )
}, { updateOn: 'blur' });