How to detect changes in a prefilled Angular Reactive Form in Edit Mode-CodePudding

I want to detect changes on a Reactive Form while working in Edit Mode. I tried using valueChanges but the issue is when I am loading an already submitted form for editing it, it is triggering events for each prefilled control. While my requirement is to only trigger when user made any changes to the form. Anyone can please suggest

CodePudding user response：

Try to subscribe to valueChanges in the ngAfterViewInit() method.

export class MyComponent implements AfterViewInit {

  ngAfterViewInit() {
    this.myForm.controls['name'].valueChanges.subscribe(change => {
      console.log(change);
    });
  }

  ...

CodePudding user response：

Using valueChanges would be a correct approach for you.

I assume you are using setValue or patchValue to set the prefilled values. Both these take as optional emitEvent property. If you set it to false, it will not fire valueChanges. So.... when you set the prefill values, use that:

this.form.setValue({ test: "test" }, { emitEvent: false });

This action will now not trigger valueChanges.