Angular 4/5 Create Form using model FormGroups

In this article i discussion on how to create form in Angular 2/4/5 using FormGroups.
In this tutorial we create form signup with following field “name,email,password,country”;
For that First we need to import class “ReactiveFormsModule” & “FormsModule” in  “app.module.ts” file. Like below syntax.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
@NgModule({ ...... 
imports: [ReactiveFormsModule,
          FormsModule, ........
})



No create component login in that first we need import “FormBuilder, FormGroup” class to start like below code.


import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {

  public signupfrm : FormGroup;

  constructor(private formBuilder: FormBuilder) {
   
   }

  ngOnInit() {

      this.signupfrm = this.formBuilder.group({
          name: [''],
          email: [''],
          pwd: [''],
          country: ['']
        });
        
  }

}

In above code you can see the first i have import “import { FormBuilder, FormGroup } from ‘@angular/forms’;” then we need to instance of the FormGroup as form for that i have created signupfrm form is type of FormGroup. In this i have use of “FormBuilder” for create form so wee need that class so it assign in the Constructor. Then we need to define all field in that form-Builder
this.formBuilder.group({ name: [”] }); ” like display in above example.
In HTML now how to write the code for it.

<h3 class="text-center">Sign UP</h3>
 <form [formGroup]="signupfrm">
 <fieldset>
 <div class="form-group">
 <label>Name</label>
 <input type="text" name="name" formControlName="name" class="form-control">
 </div>
 </fieldset>
<div class="form-group">
 <label>Email</label>
 <input type="email" name="email" formControlName="email" class="form-control">
</div> 
<div class="form-group">
 <label>Password</label>
 <input type="password" name="pwd" formControlName="pwd" class="form-control">
</div> 
<div class="form-group">
 <label>Country</label>
 <select formControlName="country" class="form-control">
  <option value="">Please select a country</option>
 </select>
</div>   
</form> 



In above HTML code you can see the “formGroup” assign name of the form. in all filed we need to formControlName with appropriate field name which we define in the ts file.
We need to country list dynamic so we need to define in ts file

public country: any;

then in ngOnit function we need to assign the values of country like below syntax.

 this.country = [
                          {'name':'India','value':'india'},
                          {'name':'United State','value':'us'},
        ];

Now in HTML you can change code like below.


<select formControlName="country" class="form-control">
<option value="">Please select a country</option>
<option *ngFor="let c of country" value="{{c.value}}">{{c.value}}</option>
</select>

Any problem with code please comment it below.
Next tutorial i discussion on how to submit form & how to get submitted value.

Spread the love
  • 29
  •  
  •  
  •  
  •  
  •  
  •  
  •