How to sync html form with form control by using reactive form module in angular?

How to sync html form with form control by using reactive form module?

After click on submit button recorded in console and you will be able to see under​​ value​​ property :

App.Component.html

<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">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ class="radio"​​ *ngFor="let gender of genders">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>

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

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ type="radio"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ formControlName="gender"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ [value]="gender">{{ gender }}

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </label>

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

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

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

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

 ​​​​ </div>

</div>

 

App.component.ts

 

import​​ { Component, OnInit }​​ from​​ '@angular/core';

import​​ { ​​ FormControl, FormGroup}​​ from​​ '@angular/forms';

import​​ { getMaxListeners }​​ from​​ 'cluster';

 

@Component({

 ​​​​ selector:​​ 'app-root',

 ​​​​ templateUrl:​​ './app2.component.html',

 ​​​​ styleUrls: ['./app2.component.css']

})

export​​ class​​ App2Component​​ implements​​ OnInit {

 ​​​​ genders = ['male',​​ 'female'];

 ​​​​ signupForm: FormGroup;

 

 ​​​​ constructor() {}

 

 ​​​​ ngOnInit() {

 ​​ ​​ ​​​​ this.signupForm =​​ new​​ FormGroup({

 ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 'username':​​ new​​ FormControl('dotnetminds.com'),

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 'email':​​ new​​ FormControl('[email protected]'),

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 'gender':​​ new​​ FormControl('male'),

 ​​ ​​ ​​​​ });

 ​​​​ }

 ​​​​ onSubmit() {

 ​​ ​​ ​​​​ console.log(this.signupForm);

 

 ​​​​ }

}

 

 

App.module.ts:

 

import​​ { BrowserModule }​​ from​​ '@angular/platform-browser';

import​​ { NgModule }​​ from​​ '@angular/core';

import​​ { HttpModule }​​ from​​ '@angular/http';

import​​ { ReactiveFormsModule }​​ from​​ '@angular/forms';

 

import​​ { AppComponent }​​ from​​ './app.component';

import​​ { App2Component }​​ from​​ './app2/app2.component';

 

@NgModule({

 ​​​​ declarations: [

 ​​ ​​ ​​​​ AppComponent,

 ​​ ​​ ​​​​ App2Component

 ​​​​ ],

 ​​​​ imports: [

 ​​ ​​ ​​​​ BrowserModule,

 ​​ ​​ ​​​​ HttpModule,

 ​​ ​​ ​​​​ ReactiveFormsModule

 ​​​​ ],

 ​​​​ providers: [],

 ​​​​ bootstrap: [App2Component]

})

export​​ class​​ AppModule { }

 

 

(Visited 15 times, 1 visits today)

Leave a Reply

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