Form state tracking (dirty, touched, valid) in Angular - Mini Project: Build & Apply

Form state tracking (dirty, touched, valid)

📖 Scenario: You are building a simple user registration form in Angular. You want to track the form's state to know when the user has interacted with the form fields, changed any values, and whether the form is valid.

🎯 Goal: Create an Angular standalone component with a form that tracks dirty, touched, and valid states for its input fields. Display these states below the form.

📋 What You'll Learn

Create a standalone Angular component named RegistrationFormComponent.

Use Angular's ReactiveFormsModule to build a form with two fields: username and email.

Add validators: username is required, email is required and must be a valid email.

Track and display the form control states: dirty, touched, and valid for each field.

Display the overall form validity.

💡 Why This Matters

🌍 Real World

Tracking form state is essential in real-world web apps to provide feedback to users about their input and to control form submission.

💼 Career

Understanding Angular reactive forms and state tracking is a key skill for frontend developers working with Angular in professional projects.

1

Set up the form controls

Create a standalone Angular component named RegistrationFormComponent. Inside it, import ReactiveFormsModule and create a FormGroup called registrationForm with two controls: username and email. Initialize both controls with empty strings and no validators yet.

Angular

import { Component } from '@angular/core';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-registration-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    
  `
})
export class RegistrationFormComponent {
  registrationForm = new FormGroup({
    username: new FormControl(''),
    email: new FormControl('')
  });
  // Your code here
}

Need a hint?

Use new FormGroup with username and email controls initialized to empty strings.

2

Add validators to form controls

Add validators to the registrationForm controls: make username required and email required with email format validation. Use Angular's built-in validators Validators.required and Validators.email.

Angular

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

// Add validators to username and email controls
// Your code here

Need a hint?

Import Validators and add Validators.required to username. Add both Validators.required and Validators.email to email.

3

Add form template with inputs and state display

In the component template, create a form using [formGroup] binding to registrationForm. Add two input fields with formControlName set to username and email. Below each input, display the control's dirty, touched, and valid states using interpolation. Also, display the overall form's valid state below the form.

Angular

template: `

  Username:
  
  

  Email:
  
  


`

Need a hint?

Use formControlName on inputs and interpolation to show dirty, touched, and valid states for each control and the form.

4

Add accessibility and final touches

Add aria-label attributes to both input fields with values Username input and Email input. Also, add a submit button with type="submit" and disable it when the form is invalid using [disabled]. This completes the form with accessibility and usability improvements.

Angular

template: `

  Username:
  
  

  Email:
  
  

  Submit


  Form Valid: {{ registrationForm.valid }}

`

Need a hint?

Add aria-label attributes to inputs and a submit button disabled when the form is invalid.