How to know when the user has completed the inputting the elements in angular forms

Question

I'm using angular reactive forms to build a form for the array of nested objects. I'm able to plot the form and it is working as expected, but in one scenario I want to able to populate a certain input box with the values that is entered in the UI currently

What I want? Below is my UI as you can see I have an array of properties. What I want is when ever user enters an propertyName. I want to be able to add that as an array and display a dropdown for the messageId field (it is a multi select kendo component)

What I have?

To listen to the propertyName change I have used the Observable that angular forms already provides for each FormControl and wrote the below code

 var propertyNameControl: FormControl = new FormControl('', Validators.required);

    propertyNameControl.valueChanges.forEach(
      (value: string) => {
        console.log(value);
        this.propertyList.push(value)
      }
    );

But valueChanges event getting triggered for every single keypress instead of onblur. So if the user enters Apple as the property name.I will have (A, AP, APP...) in my list.

Question How can I subscribe to onblur event of input box of the FormControl? Basically i'm looking for something like propertyNameControl.onFocusOut.forEach()

Answer 1

It seems you can set an option for controls to update on blur instead of on change:

const control = new FormControl('', {validators: Validators.required, updateOn: 'blur'});

or for template-driven forms

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

or for individual input elements

<input [(ngModel)]="firstName" [ngModelOptions]="{updateOn: 'blur'}">

I just saw, this seems to be Angular 5 only (https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta4-2017-08-16, https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta3-2017-08-09)