Listen Changes In Reactive Form Controls Using valueChanges In Angular

Listen Changes In Reactive Form Controls Using valueChanges In Angular

In this blog, we are going to learn how to listen to changes in reactive form controls. Most of the time, there are some changes in our form controls, which are created using either FormGroup or FormControl.

 These reactive form instances like FormGroup and FormControl have a valueChanges method that returns an observable that emits the latest values.

You can subscribe to valueChanges and perform your app logic over there. Let’s take a very simple example of valueChanges in our reactive form. We are going to create three input fields and track their values using valueChanges in reactive form.

<form [formGroup]="testForm">
    <label>First Name: <input type="text" formControlName="firstname"></label>
    <label>Last Name: <input type="text" formControlName="lastname"></label>
    <label>Email: <input type="text" formControlName="email"></label>
    </form>

app.component.html

export class AppComponent implements OnInit {

      testForm: FormGroup;


      constructor(private formBuilder: FormBuilder) {}


      ngOnInit() {
        this.testForm = this.formBuilder.group({
          firstname: '',
          lastname: '',
          email: ''
        });


        this.onValueChanges();
      }


      onValueChanges(): void {
        this.testForm.valueChanges.subscribe(val=>{
          console.log(val);
        })
      }
    }

app.component.ts

Here, you can see, we have created three input fields: firstName, lastname and email using the FormBuilder. After that, we have created a function onValueChanges() and call it in the ngOnInit().

In the onValueChanges(), we are subscribing to our complete form to track changes in any of the input fields and printing them in console log. See the output below:

valueChanges

As you type in any of the input fields, it will emit the changes to our console log.

Instead of listening changes on complete form fields, you can listen for specific form field as well.

onValueChanges(): void {
        this.testForm.get('firstname').valueChanges.subscribe(val=>{
          console.log(val);
        });
      }

app.component.ts

Just change our onValueChanges() function, and get the form field firstname and subscribe to the change event. here is the output:

As you type in firstName form field, it will emit the changes in the console log.

Summary

In this tutorial, we learned about very basic but important concept of detecting the changes in our form fields.

Further Reading

7 Ways to Make Your Angular App More Accessible

How to create a registration form using Angular 8 and Kendo UI

Angular 8 User Registration and Login Example and Tutorial

Creating Micro Frontends using Web Components (with Angular and React)

Understanding of ngRx with Redux in Angular

Using NoSQL PouchDB and SQLite with Ionic 4 & Angular: A CRUD Example

Angular 8 RxJS Multiple HTTP Request using the forkJoin Example

angular angular-js javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?