Angular has provided us with modules with which we can not only write forms but also make them reactive.

Let see how Angular 2/ Angular 4 helps us create forms.

Modules to be imported

Firstly we need two modules

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

and add them to the @NgModule’s import section.

Adding FormBuilder and FormGroup

The component where you need to include you from should import “FormBuilder and FormGroup” from @angular/forms;

FormBuilder helps define us the controls to be used in our form. With FormBuilder we can not only create our form controls but also apply validations in our forms.

let us create a component named forms and integrate angular 2 form into it.

forms.component.ts

import {Component, ElementRef, OnInit, HostListener, AfterViewInit, Inject} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'form-component'
})

export class FormComponent {

  loginForm: FormGroup;

  constructor(@Inject(FormBuilder) fb: FormBuilder) {
   
    this.loginForm = fb.group({
      email: [null, [Validators.required, Validators.pattern(/^(.*)@(\w*)\.(\w*)$/)]],   //With validators applied email patterns
      mobile: [null, [Validators.required, Validators.pattern(/^\d{10}$/)]],             
      password: [null, Validators.required]
    });
  }

  loginUser() {
   //Do things after login
  }
}

In above section of code we have create a form group named “loginFrom” using FormBuilder class group method.

Just pass an object with all the controls you wanted your forms to have. With these form controls you can pass the initial values to these controls or you can make them empty by passing “null” values.

For these controls follow some validations, you can make use of html attributes in our html file like required, pattern etc. or we can use  Validators class provided by angular forms. This class contains several methods for validations and they are directly applied to the controls of the form group.

We have used Validators.required for making email field required and also we want out email to follow a particular pattern so we have used Validators.pattern method and provide it a regex pattern for email.

Designing our forms in html

Let us create out html file for our form component:

forms.component.html :

<form [formGroup]="loginForm" (submit)="loginUser()">
  <div class="form-group">
    <input type="email" class="form-control" placeholder="Email" name="email"
           [formControl]="loginForm.controls['email']">
    <div class="ui-message ui-messages-error ui-corner-all"
         [hidden]="!(loginForm.controls['email'].invalid && loginForm.controls['email'].dirty)">
      <i class="fa fa-close"></i> Please enter your email
    </div>
  </div>
  <div class="form-group">
    <input type="password" class="form-control" placeholder="Mobile" name="mobile"
           [formControl]="loginForm.controls['mobile']">
    <div class="ui-message ui-messages-error ui-corner-all"
         [hidden]="!(loginForm.controls['mobile'].invalid && loginForm.controls['mobile'].dirty)">
      <i class="fa fa-close"></i> Please enter your mobile number
    </div>
  </div>
  <div class="form-group">
    <input type="password" class="form-control" placeholder="Password" name="password"
           [formControl]="loginForm.controls['password']">
    <div class="ui-message ui-messages-error ui-corner-all"
         [hidden]="!(loginForm.controls['password'].invalid && loginForm.controls['password'].dirty)">
      <i class="fa fa-close"></i> Please enter your password
    </div>
  </div>
 
  <div class="form-group">
    <button type="submit" [disabled]="loginForm.invalid"
            class="btn btn-primary-alt full_width">
      Login
    </button>
  </div>
  </div>
</form>

In above html file we have create a form and passed into it formGroup directive of the ReactiveForms  module and pass into it the form group create in the .ts file which is “loginForm“.

Now create form elements using the form controls of the loginForm. For binding the formgroup controls to the html input or select elements we make use of the formControl directive. This bind the value to the form group controls.

Example:

 <input type="email" class="form-control" placeholder="Email" name="email"
           [formControl]="loginForm.controls['email']">

loginForm group provides all the controls using  its “controls” property. Also do not forget to provide a name attribute to each of the form control used in your form otherwise directive “formControl” will throw errors.

Now that we have created a from with all the bindings, let us now apply some validations to the form.

Validations on form

FormGroup apply a lot of validation methods in its controls which help apply validations on these controls.

Some of these are:

1. valid
2. invalid
3. dirty
4. pristine
5. touched
6. untouched

we can use these validation methods on either of the form controls or form group.

Example:  using validator methods on form controls –

loginForm.controls['email'].invalid

This will return a boolean value telling us weather the email control is invalid or not.

To use it on the form group or complete form:

loginForm.invalid

This also returns a boolean value specifying weather all the form controls are valid or not. This is the forms complete validator.

By using these validation methods we can show our validation messages .

Enjoy writing form in angular !!