Showing validation errors in Angular - Mini Project: Build & Apply

Showing validation errors

📖 Scenario: You are building a simple Angular form for user registration. You want to show validation errors when the user leaves the input fields empty.

🎯 Goal: Create a standalone Angular component with a form that has two input fields: username and email. Show validation error messages below each input when the fields are empty and the user has touched them.

📋 What You'll Learn

Create a standalone Angular component named RegistrationFormComponent.

Add a form with two input fields: username and email.

Use Angular signals to track form control values and touched state.

Show validation error messages below each input when the field is empty and touched.

Use the new Angular 17+ control flow directives @if for conditional rendering.

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites and apps. Showing validation errors helps users fix mistakes quickly and improves user experience.

💼 Career

Understanding Angular reactive forms and accessibility is essential for frontend developer roles working on user interfaces.

1

Set up the form controls

Create a standalone Angular component named RegistrationFormComponent. Inside the component, create two signals called username and email initialized with empty strings. Also create two signals called usernameTouched and emailTouched initialized with false.

Angular

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

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

Need a hint?

Use signal from Angular to create reactive variables for the form fields and their touched states.

2

Add the form inputs and bind signals

In the component template, add two <input> elements for username and email. Bind their value to the respective signals and update the signals on input events. Also, on blur events, set the respective touched signals to true.

Angular

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

@Component({
  selector: 'app-registration-form',
  standalone: true,
  template: `
    
  `,
})
export class RegistrationFormComponent {
  username = signal('');
  email = signal('');
  usernameTouched = signal(false);
  emailTouched = signal(false);
}

Need a hint?

Use Angular property binding [value] and event binding (input) and (blur) to connect inputs to signals.

3

Add validation error messages

Below each input, use the Angular @if directive to show a <div> with the text Username is required if username is empty and usernameTouched is true. Similarly, show Email is required below the email input if email is empty and emailTouched is true.

Angular

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

@Component({
  selector: 'app-registration-form',
  standalone: true,
  template: `
    Username:
    
    

    Email:
    
    
  `,
})
export class RegistrationFormComponent {
  username = signal('');
  email = signal('');
  usernameTouched = signal(false);
  emailTouched = signal(false);
}

Need a hint?

Use Angular's *ngIf directive to conditionally show error messages based on the signals.

4

Make the component accessible and responsive

Add aria-label attributes to both inputs with values Username input and Email input. Wrap the form fields in a <form> element with aria-live="polite" to announce validation messages. Add simple CSS styles inside a <style> tag in the template to make inputs full width and error messages red and smaller.

Angular

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

@Component({
  selector: 'app-registration-form',
  standalone: true,
  template: `
    
    
     tag -->
  `,
})
export class RegistrationFormComponent {
  username = signal('');
  email = signal('');
  usernameTouched = signal(false);
  emailTouched = signal(false);
}

Need a hint?

Use aria-label on inputs for screen readers and wrap inputs in a <form> with aria-live="polite" to announce validation messages. Add CSS inside a <style> tag in the template.