Strategies for monitoring for state changes in Angular 4/6

Question

Strategies for monitoring for state changes in Angular 4/6

I am currently working on designing a webpage for account information. This web page will have 4 pre-filled fields - given name, family name, username, and email. There will also be a common save button at the bottom of the form. Users should be able to change any field by selecting the respective input field. I want the save button to only be enabled if the user makes changes to any of the fields. Is there a way to track state changes in this scenario? Below is a snippet of my code:

 <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>

This is the output generated by my code:

javascript angular typescript

Answer 1

Answer №1

When utilizing a Reactive Form, you have the option to utilize valueChanges on the FormGroup.

Since this is an Observable, you can use subscribe to establish a boolean variable that will toggle the button's enablement in the template.

...

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

  ngOnInit() {
    ...

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

  }
}

In your HTML template:

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

UPDATE:

If you want to disable the button when values stay the same, compare the current and previous form values:

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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d47424543034942486d4942404c4e4443034e4240">[email protected]</a>' 
  }

  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 has been updated correspondingly.

To see a Functional Sample StackBlitz as reference.

Answer 2

When utilizing a Reactive Form, you have the option to utilize valueChanges on the FormGroup.

Since this is an Observable, you can use subscribe to establish a boolean variable that will toggle the button's enablement in the template.

...

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

  ngOnInit() {
    ...

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

  }
}

In your HTML template:

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

UPDATE:

If you want to disable the button when values stay the same, compare the current and previous form values:

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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d47424543034942486d4942404c4e4443034e4240">[email protected]</a>' 
  }

  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 has been updated correspondingly.

To see a Functional Sample StackBlitz as reference.

Answer 3

Answer №2

function handleInputChange(value : string ){  
console.log(value );}

<input matInput placeholder="example" name="example" formControlName="exampleNM" (input)="handleInputChange($event.target.value)">

Answer 4

function handleInputChange(value : string ){  
console.log(value );}

<input matInput placeholder="example" name="example" formControlName="exampleNM" (input)="handleInputChange($event.target.value)">

Answer 5

Answer №3

Have you heard of the concept known as Dirty Check?

If you're looking for more information, check out this helpful answer on Stack Overflow:

Interested in learning about Template-Driven Forms? Here's a guide to get you started: https://angular.io/guide/forms

Or maybe you'd prefer to delve into the world of Reactive Forms? This guide will point you in the right direction: https://angular.io/guide/reactive-forms

Curious about the differences between these two concepts? Check out this informative article:

I hope you find these resources helpful.

Answer 6

Have you heard of the concept known as Dirty Check?

If you're looking for more information, check out this helpful answer on Stack Overflow:

Interested in learning about Template-Driven Forms? Here's a guide to get you started: https://angular.io/guide/forms

Or maybe you'd prefer to delve into the world of Reactive Forms? This guide will point you in the right direction: https://angular.io/guide/reactive-forms

Curious about the differences between these two concepts? Check out this informative article:

I hope you find these resources helpful.

Answer 7

Answer №4

If I were to approach this situation, here is what I would do:

  form: FormGroup;
  enableSubmission = false;
  originalData: any;

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

    this.originalData = this.form.controls['control'].value; // store the original data in a variable

    this.form.valueChanges.subscribe(changes => {
      if (this.originalData == changes.control) {  
        this.enableSubmission = false;
      }
      else {
        this.enableSubmission = true;
      }
    });
}

VIEW EXAMPLE

Answer 8

If I were to approach this situation, here is what I would do:

  form: FormGroup;
  enableSubmission = false;
  originalData: any;

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

    this.originalData = this.form.controls['control'].value; // store the original data in a variable

    this.form.valueChanges.subscribe(changes => {
      if (this.originalData == changes.control) {  
        this.enableSubmission = false;
      }
      else {
        this.enableSubmission = true;
      }
    });
}

VIEW EXAMPLE

Strategies for monitoring for state changes in Angular 4/6

Answer №1

UPDATE:

Answer №2

Answer №3

Answer №4

Similar questions

Updating the parent page host within a cross-domain iframe: issues encountered in Firefox and Chrome browsers

"Doubling Up: The Art of Adding Elements to a Polymer

I am unable to utilize the outcome of a custom hook within a function or within an effect hook

What is the best way to send a reply from a GET request query on the server side of an express application?

Manipulating an SVG graphic's attributes by linking them to an external geometry in Three.js

React App with Material UI V1-beta Integration

Filtering JavaScript arrays based on a variety of property combinations

Is it possible for issues to arise when serving a web app using the "Globals" module in the Mean Stack?

Error message: When the mouse hovers over, display the chart(.js) results in TypeError: t is

Relocate the resizable handles in jQuery outside of the div elements

What is the best way to add a color swatch image using Javascript?

Troubleshooting encoding problems with Google Cloud's Speech-to-Text API using Node.js

During development, getStaticPaths and getStaticProps successfully function, however, the prop during build time becomes undefined

Utilize jQuery to extract various input/select box values and compile them into an array for submission using .ajax()

Using an external call to trigger the revert method in jQuery UI

CSS3 Transition effects are applied immediately to duplicated elements

Issue with AJAX POST request: PHP failing to establish session

Tips for resolving Circular dependency issue in node.js?

How to create a custom Error page in Next.js using TypeScript

Is there a way to eliminate the header and footer from a Flutter WebView?