Rendering Your Angular Reactive Form Control Value in a Template

Photo by Lukasz Szmigiel on Unsplash

Updated Version

There is an updated version of this article here:

Rendering Your Angular Reactive Form Control Value in a Template

Scenario

We have an email form like this:

<form [formGroup]="form">
    <input placeholder="Email" type="email" formControlName="email">
</form>

And we want to render the value of the email form control like this:

<p>{{email}}</p>

Approach

Create a getter form the form control value:

get email() { return this.form.get('email').value; }

Demo

Brought To You By

Firefly Semantics Supply Chain and Big Data Analytics for the Cloud