Rendering Your Angular Reactive Form Control Value in a Template

Updated Version

There is an updated version of this article here:

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store