Learn how to create forms with validations in angular 2

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.


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

  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"
    <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 class="form-group">
    <input type="password" class="form-control" placeholder="Mobile" name="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 class="form-group">
    <input type="password" class="form-control" placeholder="Password" name="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 class="form-group">
    <button type="submit" [disabled]="loginForm.invalid"
            class="btn btn-primary-alt full_width">


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.


 <input type="email" class="form-control" placeholder="Email" name="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 –


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:


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





Recent Post

  • How to Connect A Biometric Attendance Device to a System through JS and Node.js?

    In the world of highly advanced workspaces, the utilization of biometric attendance structures has come to be important for accurate and steady tracking of worker or student attendance. This blog publishes objectives to provide a complete guide on integrating a biometric attendance device with a gadget with the use of JavaScript and Node.Js. By making […]

  • How to Implement File Uploads in Node.js with Multer?

    For many web applications that let users share papers, photos, and other types of material, file uploads are a necessary functionality. Multer is a well-liked middleware used for Handling file uploads in Node.js using Multer middleware.in the Node.js environment to effectively handle file uploads. We’ll look at how to use Multer to create file uploads […]

  • How to Use Local Storage to Persist Data in a JavaScript Application?

    Data persistence is a key aspect of web applications. In JavaScript, one of the primary tools for achieving this is Local Storage, a part of the Web Storage API. This JavaScript data persistence tool provides a simple key-value storage mechanism within the user’s browser. Unlike session storage, which persists data only during a session, Local […]

  • How to Use WordPress API?

    WordPress stands out as a leading content management system, celebrated for its dynamic capabilities in website and blog development. Renowned for its rich feature set and extensive customization options, WordPress empowers creators to fashion captivating online experiences. In recent times, WordPress has expanded its horizons into the realm of APIs, granting developers a potent tool […]

  • How to Use Post and Pre Hooks in Mongoose?

    In Mongoose, a widely-used library for working with MongoDB, there are valuable tools called “Pre and Post Hooks.” These hooks, also known as “Mongoose Middleware” or “Mongoose Model Hooks,” allow developers to run their own code just before or after specific actions on the database. With “Pre Hooks,” you can customize actions before they happen, […]

  • How To Create Reusable Components in React: Best Practices

    Rеact is a popular library for building usеr intеrfacеs with JavaScript. One of the main benefits of Rеact is its ability to create reusable componеnts that can be used in different parts of your application. Reusable componеnts can help you savе timе, rеducе codе duplication, and еnsurе consistеncy in your UI. However, creating rеusablе componеnts […]