Angular valuechanges call multiple times while Page loading

Question

I am using angular 4 and i am checking is any value is changed by user or not? In my page there are more than 100 control(textbox ,dropdown and editable grid)

I need to check only if any value is changed or not. For that i am using below code but it is called multiple times while pageload.

How i can avoid this.i need valuechange will execute only on when user change any value.

import { Component, OnInit, ViewChild, AfterViewInit, HostListener, OnChanges, DoCheck, AfterViewChecked,OnDestroy } from "@angular/core";


 @ViewChild('fromNote') fnotes;
 
 ngAfterViewInit() {
        this.fnotes.valueChanges.subscribe(val => {
            alert('changed');
        });
}

Answer 1

In Angular 5 you’ll be able to specify the update mode for forms and form controls.

updateOn: 'submit' runs the value changes only when the form is submitted.

this.nameForm = new FormGroup ({
  firstname: new FormControl('', {
    validators: Validators.required,
    updateOn: 'submit'
  }),
  lastname: new FormControl('', {
    validators: Validators.required,
    updateOn: 'submit'
  })
});

Different options are updateOn: 'blur' and updateOn: 'submit'

const c = new FormControl('', { updateOn: 'blur' }); and

 const c = new FormControl('', { updateOn: 'submit' });

From Official Documentation updateOn to 'submit', will delay value and validity updates until the parent form of the control fires a submit event.