Reactive form instances like FormGroup and FormControl have a valueChanges method that returns an observable that emits the latest values. You can therefore subscribe to valueChanges to update instance variables or perform operations.

Take a look at our intro to Reactive Forms if this is all new to you.

Here we’ll create a very simple example that updates a template string every time a value changes in the form.
First, let’s initialize our reactive form with FormBuilder:

myForm: FormGroup;
formattedMessage: string;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.myForm ={
    name: '',
    email: '',
    message: ''


Notice how we call an onChanges method in the ngOnInit lifecycle hook after having initialized our form. Here’s the content of our onChanges method:

onChanges(): void {
  this.myForm.valueChanges.subscribe(val => {
    this.formattedMessage =

    My name is ${} and my email is ${}.

    I would like to tell you that ${val.message}.`;

You can also listen for changes on specific form controls instead of the whole form group:

onChanges(): void {
  this.myForm.get('name').valueChanges.subscribe(val => {
    this.formattedMessage = `My name is ${val}.`;

🌌 Since valueChanges returns an observable, thy sky is pretty much the limit in terms of what you can do with the values that are emitted.