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.

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

 


Posted

in

by

Recent Post

  • Generative AI for IT: Integration approaches, use cases, challenges, ROI evaluation and future outlook

    Generative AI is a game-changer in the IT sector, driving significant cost reductions and operational efficiencies. According to a BCG analysis, Generative AI (GenAI) has the potential to deliver up to 10% savings on IT spending—a transformation that is reshaping multiple facets of technology. The impact is especially profound in application development, where nearly 75% […]

  • Generative AI in Manufacturing: Integration approaches, use cases and future outlook

    Generative AI is reshaping manufacturing by providing advanced solutions to longstanding challenges in the industry. With its ability to streamline production, optimize resource allocation, and enhance quality control, GenAI offers manufacturers new levels of operational efficiency and innovation. Unlike traditional automation, which primarily focuses on repetitive tasks, GenAI enables more dynamic and data-driven decision-making processes, […]

  • Generative AI in Healthcare: Integration, use cases, challenges, ROI, and future outlook

    Generative AI (GenAI) is revolutionizing the healthcare industry, enabling enhanced patient care, operational efficiency, and advanced decision-making. From automating administrative workflows to assisting in clinical diagnoses, GenAI is reshaping how healthcare providers, payers, and technology firms deliver services. A Q1 2024 survey of 100 US healthcare leaders revealed that over 70% have already implemented or […]

  • Generative AI in Hospitality: Integration, Use Cases, Challenges, and Future Outlook

    Generative AI is revolutionizing the hospitality industry, redefining guest experiences, and streamlining operations with intelligent automation. According to market research, the generative AI market in the hospitality sector was valued at USD 16.3 billion in 2023 and is projected to skyrocket to USD 439 billion by 2033, reflecting an impressive CAGR of 40.2% from 2024 […]

  • Generative AI for Contract Management: Overview, Use Cases, Implementation Strategies, and Future Trends

    Effective contract management is a cornerstone of business success, ensuring compliance, operational efficiency, and seamless negotiations. Yet, managing complex agreements across departments often proves daunting, particularly for large organizations. The TalkTo Application, a generative AI-powered platform, redefines contract management by automating and optimizing critical processes, enabling businesses to reduce operational friction and improve financial outcomes. […]

  • Generative AI in customer service: Integration approaches, use cases, best practices, and future outlook

    Introduction The rise of generative AI is revolutionizing customer service, heralding a new era of intelligent, responsive, and personalized customer interactions. As businesses strive to meet evolving customer expectations, these advanced technologies are becoming indispensable for creating dynamic and meaningful engagement. But what does this shift mean for the future of customer relationships? Generative AI […]

Click to Copy