Angular valuechanges call multiple times while Page loading

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.

According to the official documentation, ngOnChanges gets called by default before the ngOnInit as well as on data-bound input properties change.

So, if you want to avoid that, try to:

• Limit the @Input bound property changes on page load
• Use a flag to detect only the user-made changes :

for instance:

private initialised = false;

ngInInit(){
  ...
  this.initialized = true;
}

ngOnChanges(){
  if(this.initilazied){<your code here>}
}

Or: use a different lifecylce hook, or use the (change) method calls in the component

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

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

            ngOnDestroy() {
                 this.subScription.unsubscribe()
            }

Are you trying to unsubscribe to the valuechanges in ngOnDestroy ? If not try to unsubscribe. Valuechanges is an observable and needs to be unsubscribed or it will look for changes in every instance.

 import { Component, OnInit, ViewChild, AfterViewInit, HostListener, OnChanges, DoCheck, AfterViewChecked,OnDestroy } from "@angular/core";
 @ViewChild('fromNote') fnotes;
 
 ngAfterViewInit() {
        this.fnotes.valueChanges.subscribe(val => {

    if(this.fnotes.dirty){
        alert('changed');
    }
        });
}