Skip to main content

Form Validation

Angular Forms are a robust way to handle user input, and one of their key features is the ability to validate user input. Validation ensures data integrity and improves user experience by providing feedback on what's been entered. In this tutorial, we will learn about Angular Form Validation.

What is Form Validation?​

Form Validation is a process that checks if the information provided by a user meets all specified requirements before it is sent to the server. It's essential to validate user inputs to ensure the data is correct, complete, and secure.

Types of Form Validation in Angular​

Angular provides two types of form validation:

  1. Template-driven Validation: This approach uses directives to create and validate forms.

  2. Reactive Form Validation: This approach uses a more explicit, immutability-based methodology for creating and validating forms.

Template-Driven Form Validation​

To start with template-driven form validation, we need to import FormsModule from @angular/forms in our app.module.ts.

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

@NgModule({
  imports: [
    FormsModule
  ]
})

To validate a form field in Angular, you can use HTML5 validation attributes. For example, to make a field required:

<input name="name" ngModel required>

Angular also provides a set of status CSS classes for controls. These include ng-valid, ng-invalid, ng-touched, ng-untouched, ng-dirty, and ng-pristine.

Reactive Form Validation​

Reactive forms are more robust, scalable, reusable, and testable. To use reactive forms, we need to import ReactiveFormsModule from @angular/forms.

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

@NgModule({
  imports: [
    ReactiveFormsModule
  ]
})

In reactive forms, you create and manage form control objects in your component class. To validate a form field, you can use Validators provided by Angular. For example, to make a field required:

this.form = this.formBuilder.group({
  name: ['', Validators.required]
});

Angular provides several built-in validators including required, min, max, requiredTrue, email, minLength, and maxLength.

Custom Validators​

Sometimes, built-in validators may not meet your requirements. In such cases, you can write your own custom validators. A custom validator is just a function that takes a control and returns an error or null.

function forbiddenNameValidator(control: AbstractControl): {[key: string]: any} | null {
  const forbidden = /admin/.test(control.value);
  return forbidden ? {'forbiddenName': {value: control.value}} : null;
}

Displaying Validation Errors​

To display validation errors, you can make use of the properties of form controls such as dirty, touched, and invalid.

<input id="name" formControlName="name">
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert">
  <div *ngIf="name.errors.required">
    Name is required.
  </div>
</div>

With these, you can create a highly responsive and user-friendly form interface that provides instant feedback on the correctness of user input.

That concludes our tutorial on Angular Form Validation. By now, you should be able to validate forms using both template-driven and reactive form validation. You should also be able to create custom validators and display validation errors. Happy coding!