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:

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

--

--

--

Founder of Firefly Semantics Corporation

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Build a JAMStack Blog in No Time with Gridsome

Preemptive tactics to improve your Lighthouse score

Building Custom Resolvers with Strapi

Basic things you should know about JavaScript

Weekly Digest #33

Recreating the NgRx Demo App With the Firefly Semantics Slice State Manager

React App with CSP in Flask

What is NodeJS? Part-1

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
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation

More from Medium

Pagination with RxJS state, and Route Params

React vs Angular

Angular architecture for enterprise applications (Nx+ NgRx + TailwindCss + AngularMaterial)

Welcome to pl-core-utils-library