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

  • Building Intelligent AI Models For Enterprise Success: Insider Strategies 

    Just picture a world where machines think and learn like us. It might sound like a scene straight out of a sci-fi movie, right? Well, guess what? We are already living in that world now. Today, data, clever algorithms, and AI models are changing the way businesses operate. AI models are serving as a brilliant […]

  • Introducing Google Vids in Workspace: Your Ultimate AI-Powered Video Creation Tool

    Hey there, fellow content creators and marketing gurus! Are you tired of drowning in a sea of emails, images, and marketing copy, struggling to turn them into eye-catching video presentations? Fear not, because Google has just unveiled its latest innovation at the Cloud Next conference in Las Vegas: Google Vids- Google’s AI Video Creation tool! […]

  • Achieve High ROI With Expert Enterprise Application Development

    Nowadays modern-day enterprises encounter no. of challenges such as communication breakdown, inefficient business processes, data fragmentation, data security risks, legacy system integration with modern applications, supply chain management issues, lack of data analytics and business intelligence, inefficient customer relationship management, and many more. Ignoring such problems within an organization can adversely impact various aspects of […]

  • State Management with Currying in React.js

    Dive into React.js state management made easy with currying. Say goodbye to repetitive code and hello to streamlined development. Explore the simplicity and efficiency of currying for your React components today!

  • How Much Does It Cost to Develop an App in 2024?

    The price of bringing your app to life typically ranges from $20,000 to $200,000. This cost varies based on factors like which platform you choose, the complexity of features you want, and the size of your intended audience. However, costs can climb even higher for more complex projects, reaching up to $350,000.

  • Mastering Software Testing Strategies: Your Guide

    Implementing best software testing strategies is a crucial part of software development, ensuring that digital products meet industry standards. Defined by the International Software Testing Qualification Board, it encompasses a range of activities, both static and dynamic, throughout the software’s lifecycle. As an essential component of the Software Development Life Cycle (SDLC), the Software Testing […]