How to check for state change in angular 4/6?

Question

My task is to create an account information web page which consists of 4 pre-filled fields (given name, family name, username and email) and a common save button at the bottom. User can change any field by the respective field. I want save button to be enabled only if user changes any fields. Any method to track state changes? My code is as follows:

 <mat-card-content>
    <div class="form-group">
      <mat-form-field class="simple-form-field-50">
        <input matInput placeholder="Given name" name="givenName" formControlName="givenName">
      </mat-form-field>
      <mat-form-field class="simple-form-field-50">
        <input matInput placeholder="Family name" name="familyName" formControlName="familyName">
      </mat-form-field>
      <br>
      <mat-form-field>
        <input matInput placeholder="Email" name="email" formControlName="email">
      </mat-form-field>
      <br>
      <button
          [disabled]="waiting"
          class="simple-form-button" 
          color="primary" 
          mat-raised-button 
          type="submit" 
          value="submit">
        Save
      </button> 
    </div>
</mat-card-content>

My Code Output:

SiddAjmera · Accepted Answer · 2018-12-27T10:53:27.957

Since you're using a Reactive Form, you can use valueChanges on the FormGroup.

Since it is of type Observable, you can subscribe to it to set a variable of type boolean that will be used in the template to enable the button.

...

@Component({...})
export class AppComponent  {
  form: FormGroup;
  disableButton = true;

  ngOnInit() {
    ...

    this.form.valueChanges.subscribe(changes => this.disableButton = false);

  }
}

And in your template:

<form [formGroup]="form">
  ...
  <button [disabled]="disableButton">Submit</button>
</form>

UPDATE:

If you want to disable it when values don't really change, check for the current value of the form with the previous value:

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  form: FormGroup;
  disableButton = true;

  userValue = {
    firstName: 'John',
    lastName: 'Doe',
    email: 'john.doe@domain.com' 
  }

  ngOnInit() {
    this.form = new FormGroup({
      firstName: new FormControl(),
      lastName: new FormControl(),
      email: new FormControl()
    });
    this.form.patchValue(this.userValue);
    this.form.valueChanges.subscribe(changes => this.wasFormChanged(changes));
  }

  private wasFormChanged(currentValue) {
    const fields = ['firstName', 'lastName', 'email'];

    for(let i = 0; i < fields.length; i++) {
      const fieldName = fields[i];
      if(this.userValue[fieldName] !== currentValue[fieldName]) {
        console.log('Came inside');
        this.disableButton = false;
        return;
      }
    }
    this.disableButton = true;
  }

}

NOTE: StackBlitz is updated accordingly.

Here's a Working Sample StackBlitz for your ref.

@MadhavanSundararaj, just added a working sample stackblitz for your ref. — SiddAjmera, Dec 27 '18 at 10:24
It's working but if i clear it and write the same value, its still enabled. Any way to check for that too? Thank you for your answer. — Madhavan Sundararaj, Dec 27 '18 at 10:34
@MadhavanSundararaj, I've updated my answer with the fix that you want. I think it should work now. — SiddAjmera, Dec 27 '18 at 10:54
userValue returns undefined for me. Any method to rectify it? — Madhavan Sundararaj, Dec 27 '18 at 11:43

MKJ · Answer 2 · 2018-12-27T11:19:40.150

2

onChange(targetValue : string ){  
console.log(targetValue );}

<input matInput placeholder="test" name="test" formControlName="testNM" (input)="onChange($event.target.value)">

edited Dec 27 '18 at 11:19

answered Dec 27 '18 at 11:14

MKJ

120
8

score 1 · Answer 3 · answered Dec 27 '18 at 10:27

This is called Dirty Check.

You may find this SO answer very useful: https://stackoverflow.com/a/50387044/1331040

Here is the guide for Template-Driven Forms https://angular.io/guide/forms

Here is the guide for Reactive Forms https://angular.io/guide/reactive-forms

And here is the difference between two concepts https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

Hope these help.

score 1 · Answer 4 · answered Dec 27 '18 at 10:42

1

I would do something like this:

  form: FormGroup;
  disableButton = true;
  originalObj: any;

  ngOnInit() {
    this.form = new FormGroup({
      control: new FormControl('Value')
    });

    this.originalObj = this.form.controls['control'].value; // store the original value in one variable

    this.form.valueChanges.subscribe(changes => {
      if (this.originalObj == changes.control)  // this if added for check the same value
      {
        this.disableButton = true;
      }
      else {
        this.disableButton = false;
      }
    }
    );
}

WORKING EXAMPLE

answered Dec 27 '18 at 10:42

Prashant Pimpale

10,349
9
44
84

This works fine. What is control here? I have the following in my ts this.form = new FormGroup ({ givenName: new FormControl(user.givenName), familyName: new FormControl(user.familyName), email: new FormControl(user.email), }); – Madhavan Sundararaj Dec 27 '18 at 10:47
its a name of control that you want to check – Prashant Pimpale Dec 27 '18 at 10:48
if there is givenName constrol then `changes.givenName`, `changes.familyName`, `changes.email` – Prashant Pimpale Dec 27 '18 at 10:49
try to optimized as I am in hurry so unable to do this – Prashant Pimpale Dec 27 '18 at 10:50

How to check for state change in angular 4/6?

4 Answers4

UPDATE: