Angular - NgForm valueChanges called multiple times on page load

Question

I have a problem using the valueChanges function of ngForm. When binding an Input variable to the form with [(ngModel)], the form gets called multiple times on page load.

Is there a good way to only detect user changes?

export class ContainerComponent implements OnInit, AfterViewInit {
  @Input() formData: Object;
  @ViewChild('form') form: NgForm;
  constructor() { }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
     this.form.form.valueChanges.subscribe((value) => {
       //Gets called multiple times on page load
     });
  }

}

Tadhg · Accepted Answer · 2020-06-05 09:39:48Z

2

Perhaps it will be sufficient to just check for dirty/touched state

From: https://angular.io/guide/form-validation

To prevent the validator from displaying errors before the user has a chance to edit the form, you should check for either the dirty or touched states in a control.

When the user changes the value in the watched field, the control is marked as "dirty".
When the user blurs the form control element, the control is marked as "touched".

answered Jun 5, 2020 at 9:39

Tadhg

234 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zharin Over a year ago

Solved the problem for me. Thanks a lot!

Zharin · Accepted Answer · 2020-06-05 09:51:50Z

1

I solved the problem:

export class ContainerComponent implements OnInit, AfterViewInit {
  @Input() formData: Object;
  @ViewChild('form') form: NgForm;
  constructor() { }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
     this.form.form.valueChanges.subscribe((value) => {
       if(this.form.form.dirty) {
          //DO STUFF
        }
     });
  }

}

answered Jun 5, 2020 at 9:51

Zharin

751 silver badge12 bronze badges

Comments

upinder kumar · Accepted Answer · 2020-06-05 09:55:30Z

0

Try this :

export class ContainerComponent implements OnInit, AfterViewInit {
  @Input() formData: Object;
  @ViewChild('form') form: NgForm;
  constructor() { }

  ngOnInit(): void {
   this.form.form.valueChanges.subscribe((value) => {
       //Gets called multiple times on page load
     });
  }

  ngAfterViewInit(): void {

  }

}

answered Jun 5, 2020 at 9:55

upinder kumar

8376 silver badges8 bronze badges

Collectives™ on Stack Overflow

Angular - NgForm valueChanges called multiple times on page load

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related