Angular Form Validation States Tutorial 🎯

Welcome to this comprehensive guide on Angular Form Validation States! In this lesson, we'll explore how to validate forms effectively in your Angular projects. By the end of this tutorial, you'll understand form validation states and how to create robust and user-friendly forms.

Understanding Form Validation States 📝

In Angular, form validation states help us to control and visualize the validity of a form and its individual fields. There are three main form validation states:

ng-untouched: The form has not been interacted with since it was created.
ng-touched: The form has been interacted with.
ng-valid: The form is valid, meaning all required fields are filled out, and any custom validation rules are satisfied.
ng-invalid: The form is invalid, meaning there are errors that need to be addressed, such as missing or incorrect input.

Creating a Simple Form 💡

Let's start by creating a simple form and adding validation states to it.

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-form',
  template: `
    <form #myForm="ngForm">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required ngModel>
      <div *ngIf="myForm.controls['username'].errors && myForm.controls['username'].touched">
        <small *ngIf="myForm.controls['username'].errors.required">Username is required</small>
      </div>
    </form>
  `,
})
export class FormComponent {
}

In this example, we created a simple form with a username input field. We added required attribute to the input element to make it mandatory, and we used Angular's ngModel directive to bind the input to a property.

We also added an ngIf directive to check if the form control's errors object and touched property are truthy, and if so, we display an error message.

Quick Quiz

Question 1 of 1

What is the purpose of the `ng-touched` validation state in Angular?

Adding Custom Validation Rules 💡

We can also create custom validation rules in Angular. Let's add a custom validation rule to check if a username is unique.

typescript

import { Component, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-form',
  template: `
    <form #myForm="ngForm">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required usernameUnique ngModel>
      <div *ngIf="myForm.controls['username'].errors && myForm.controls['username'].touched">
        <small *ngIf="myForm.controls['username'].errors.required">Username is required</small>
        <small *ngIf="myForm.controls['username'].errors.usernameUnique">Username already exists</small>
      </div>
    </form>
  `,
})
export class FormComponent {
  usernameControl = new FormControl('', [Validators.required, customValidators.uniqueUsername]);

  static get uniqueUsername() {
    return function(control) {
      return UserService.checkUsername(control.value).then(exists => {
        return exists ? { usernameUnique: true } : null;
      });
    }
  }
}

In this example, we added a custom validator uniqueUsername that uses the UserService to check if a username already exists. If it does, the validation rule fails, and an error message is displayed.

Quick Quiz

Question 1 of 1

How do you define a custom validation rule in Angular?

Wrapping Up 📝

You've now learned how to create and validate forms in Angular by using form validation states and custom validation rules. Practice these concepts by building your own forms and adding validation states and custom validation rules to them. Happy coding! 🎉