Form Validation in Template Forms (Angular)

Welcome to the Form Validation in Template Forms tutorial! In this comprehensive guide, we'll explore how to validate forms in Angular using template forms. This tutorial is designed for both beginners and intermediates, so let's dive right in!

Understanding Template Forms

Template forms are a simple and quick way to create forms in Angular. They allow you to define forms directly in your HTML templates, making it easier to create and manipulate forms.

💡 Pro Tip: Use template forms when you want to create a simple form with basic validation requirements.

Setting Up a Template Form

Let's start by setting up a basic template form.

html

<form #myForm="ngForm">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" ngModel>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" ngModel>
  <br>
  <button type="submit">Submit</button>
</form>

In the above code, #myForm is a reference to the form, and ngModel is used for two-way data binding.

📝 Note: Angular's template forms use the ngModel directive for data binding.

Basic Form Validation

To validate a form, we'll use Angular's built-in validators. Let's add some validation to our example form.

html

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <!-- Form fields -->

  <button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

In the updated code, we've added an event handler (ngSubmit) and a [disabled] attribute to the submit button. The myForm.invalid expression ensures the button is disabled until the form is valid.

Custom Validators

Custom validators allow us to create our own validation rules. Let's create a custom validator for a password confirmation form.

typescript

import { Directive, forwardRef, Validator, NG_VALIDATORS, FormControl } from '@angular/forms';

@Directive({
  selector: '[appConfirmPassword][ngModel]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: ConfirmPasswordValidator, multi: true }
  ]
})
export class ConfirmPasswordValidator implements Validator {
  validate(c: FormControl): { [key: string]: any } {
    const password = c.root.get('password')?.value;
    const confirmPassword = c.value;

    if (password === confirmPassword) {
      return null;
    }

    return { confirmPassword: true };
  }
}

In this example, we've created a ConfirmPasswordValidator directive that compares the values of two fields (password and confirmPassword) and returns an error if they don't match.

Form Validation Summary

In this lesson, we've covered the basics of form validation in Angular using template forms, including:

Understanding template forms
Setting up a template form
Basic form validation
Custom validators

Now that you understand form validation in Angular, let's put your knowledge to the test!

Keep learning, and happy coding! 🚀🌟