How to create a template form in reactive approach in Angular 6?

How to create a template form in reactive approach in Angular 6?

Reactive​​ : Form is created programmatically and synchronized with the DOM.

 

App.Componet.ts

<div​​ class="container">

 ​​​​ <div​​ class="row">

 ​​ ​​ ​​​​ <div​​ class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">

 ​​ ​​ ​​ ​​ ​​​​ <form​​ [formGroup]="signupForm"​​ (ngSubmit)="onSubmit()">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label​​ for="username">Username</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <input

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ type="text"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ id="username"

formControlName="username"

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ class="form-control">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label​​ for="email">email</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <input

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ type="text"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ id="email"

formControlName="email"

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ class="form-control">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <button​​ class="btn btn-primary"​​ type="submit">Submit</button>

 ​​ ​​ ​​ ​​ ​​​​ </form>

 ​​ ​​ ​​​​ </div>

 ​​​​ </div>

</div>

 

(Visited 4 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *