Form validation with template attributes in Angular - Mini Project: Build & Apply

Form validation with template attributes

📖 Scenario: You are building a simple user registration form for a website. The form needs to check that the user enters a valid email and a password that is at least 6 characters long before allowing submission.

🎯 Goal: Create an Angular standalone component with a form that uses template-driven validation attributes to ensure the email and password fields are valid. Show error messages when the inputs are invalid.

📋 What You'll Learn

Use Angular standalone component with standalone: true

Create a form with ngForm directive

Add required and email attributes to the email input

Add required and minlength="6" attributes to the password input

Display validation error messages below each input when invalid and touched

Add a submit button disabled when the form is invalid

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites and apps. Validating user input before sending it to the server improves user experience and data quality.

💼 Career

Understanding Angular template-driven forms and validation is essential for frontend developers working on user interfaces that require input validation.

1

Create the form data model

Create a standalone Angular component named RegisterFormComponent with a user object having email and password properties both initialized to empty strings.

Angular

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

@Component({
  selector: 'app-register-form',
  standalone: true,
  template: `
    
  `
})
export class RegisterFormComponent {
  // Your code here
}

Need a hint?

Define a user object with email and password as empty strings inside the component class.

2

Add the form and input fields with validation attributes

Inside the component template, add a <form> element with #form="ngForm". Add an email input with name="email", [(ngModel)]="user.email", required, and email attributes. Add a password input with name="password", [(ngModel)]="user.password", required, and minlength="6" attributes.

Angular

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

@Component({
  selector: 'app-register-form',
  standalone: true,
  template: `
    
      
    
  `
})
export class RegisterFormComponent {
  user = {
    email: '',
    password: ''
  };
}

Need a hint?

Use ngModel with two-way binding and add required, email, and minlength attributes on inputs.

3

Show validation error messages below inputs

Below the email input, add a <div> that shows the text 'Email is required' if the email input is invalid and touched, and another <div> that shows 'Enter a valid email' if the email input has an email format error and is touched. Below the password input, add a <div> that shows 'Password is required' if invalid and touched, and another <div> that shows 'Password must be at least 6 characters' if minlength error and touched.

Angular

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

@Component({
  selector: 'app-register-form',
  standalone: true,
  template: `
    
      Email:
      
      

      Password:
      
      
    
  `
})
export class RegisterFormComponent {
  user = {
    email: '',
    password: ''
  };
}

Need a hint?

Use template reference variables with #emailRef="ngModel" and #passwordRef="ngModel". Use *ngIf to conditionally show error messages based on invalid, touched, and errors.

4

Add submit button disabled when form is invalid

Inside the form, add a <button> with type submit and text Register. Disable the button when the form is invalid using [disabled]="form.invalid".

Angular

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

@Component({
  selector: 'app-register-form',
  standalone: true,
  template: `
    
      Email:
      
      
        Email is required
        Enter a valid email
      

      Password:
      
      
        Password is required
        Password must be at least 6 characters
      

      
    
  `
})
export class RegisterFormComponent {
  user = {
    email: '',
    password: ''
  };
}

Need a hint?

Add a submit button inside the form and disable it when form.invalid is true.