Listen Changes In Reactive Form Controls Using valueChanges In Angular

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.

Summary

Further Reading

zeptobook.com

Listen Changes In Reactive Form Controls Using valueChanges In Angular