Rendering Your Angular Reactive Form Control Value in a Template | Task

Ole Ersoy
Feb - 14  -  1 min

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