How to Check if a Reactive Form Value is Changed in Angular?

To check if a reactive form value is changed in Agular, you can subscribe to the valueChanges property of the form group.

The valueChanges property is actually an observable that emits the current value of the form group as soon as the value of any form control changes.

For example, let’s say we have a reactive form userForm in our ts file. We want to get the current value of the form as soon as the user makes any changes to any of its form controls.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  userForm: FormGroup;
  currentValue: any;

  constructor(private fb: FormBuilder) {

    this.userForm = this.fb.group({
      firstName: ['Manoj', Validators.required],
      lastName: ['kumar', Validators.required],
      email: ['manoj@gmail.com', [Validators.required, Validators.email]]
    });

  }

  ngOnInit(): void {
    this.detectChanges();
  }


  detectChanges() {

    // Fires on each form control value change
    this.userForm.valueChanges.subscribe(res => {

      // Variable res holds the current value of the form
      this.currentValue = res;

    });

  }

  submit() {
    // Add your stuff
  }

}

Here is the template file:

<div class="container">

  <form [formGroup]="userForm">
    <div>
      <input type="text" formControlName="firstName">
      <label> First Name</label>
    </div>
    <div>
      <input type="text" formControlName="lastName">
      <label> Last Name</label>
    </div>
    <div>
      <input type="email" formControlName="email">
      <label> Email</label>
    </div>

    <!-- Print the latest value of the form -->
    <p>{{currentValue | json}}</p>

    <button type="submit" (click)="submit()">Submit</button>

  </form>
</div>

Output:

Check if a reactive form value is changed in Angular

As you can see from the above output, the valueChanges observable is emitting the current value of the form every time the form control value is changed.

This is how you can keep track if the form value is changed or not.


Check if a Form Control Value is Changed

You can also use the above approach to check if a form control value is changed or not. Just subscribe to the valueChanges observable of the form control instead of the form group.

To get the form control from the form group, you can call the get() method on the form group by passing the form control name as an argument.

See the following example, where we have subscribed to the valueChanges observable on the firstName form control to keep track if its value is changed or not:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  userForm: FormGroup;
  firstName: any;

  constructor(private fb: FormBuilder) {

    this.userForm = this.fb.group({
      firstName: ['Manoj', Validators.required],
      lastName: ['kumar', Validators.required],
      email: ['manoj@gmail.com', [Validators.required, Validators.email]]
    });

  }

  ngOnInit(): void {
    this.detectChanges();
  }


  detectChanges() {

    // Fires as soon as firstName form control's value changes
    this.userForm.get('firstName')?.valueChanges.subscribe(res => {

      // Variable res holds the current value of firstName form control
      this.firstName = res;

    });

  }

  submit() {
    // Add your stuff
  }

}

Add the template:

<div class="container">

  <form [formGroup]="userForm">
    <div>
      <input type="text" formControlName="firstName">
      <label> First Name</label>
    </div>
    <div>
      <input type="text" formControlName="lastName">
      <label> Last Name</label>
    </div>
    <div>
      <input type="email" formControlName="email">
      <label> Email</label>
    </div>

    <!-- Print the current form value -->
    <p>The value of First Name is: <b>{{firstName}}</b></p>

    <button type="submit" (click)="submit()">Submit</button>

  </form>

</div>

Output:

Check if a Form Control value is changed or not in Angular

You can subscribe to the valueChanges observable on any form control or any form group you want to keep track of its value.

That’s all for this article. Thanks for reading!

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts