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
}

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

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:
  
  


`

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 }}

`

Hint

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

Practice

1. In Angular forms, what does the dirty state indicate about a form control?

easy

A. The input has passed validation rules.

B. The user has changed the input value.

C. The user has focused and then left the input.

D. The form control is disabled.

Solution

1. Step 1: Understand the meaning of dirty in Angular forms

   The dirty state means the user has changed the value of the input from its original value.

2. Step 2: Compare with other states

   touched means the user focused and left the input, valid means the input passes validation, and disabled means the control is inactive.

3. Final Answer:

   The user has changed the input value. -> Option B

4. Quick Check:

   dirty = user changed input [OK]

Hint: Dirty means input value changed by user [OK]

Common Mistakes:

• Confusing dirty with touched state
• Thinking dirty means input is valid
• Assuming dirty means input is disabled

2. Which of the following is the correct way to check if a form control named email is touched in an Angular template?

easy

A. form.controls.email.touched

B. form.email.touched()

C. form.get('email').isTouched

D. form.controls['email'].isTouched()

Solution

1. Step 1: Recall Angular form control access syntax

   In Angular, form controls are accessed via form.controls.controlName or form.get('controlName'). The touched property is a boolean, not a method.

2. Step 2: Identify correct property usage

   form.controls.email.touched correctly accesses the touched property. Other options incorrectly use method calls or wrong property names.

3. Final Answer:

   form.controls.email.touched -> Option A

4. Quick Check:

   Access touched as property, not method [OK]

Hint: Use .controls.name.touched without parentheses [OK]

Common Mistakes:

• Using parentheses like a method on touched
• Using incorrect property names like isTouched
• Accessing controls incorrectly with dot vs bracket

3. Given this Angular reactive form control initialization:

this.form = new FormGroup({
  username: new FormControl('', Validators.required)
});

// User focuses on username input, types 'John', then leaves the input.

What will be the values of dirty, touched, and valid for username after these actions?

medium

A. dirty: true, touched: true, valid: false

B. dirty: false, touched: true, valid: true

C. dirty: true, touched: false, valid: false

D. dirty: true, touched: true, valid: true

Solution

1. Step 1: Analyze user actions on the form control

   User focused and left the input, so touched is true. User changed the value from empty string to 'John', so dirty is true.

2. Step 2: Check validation status

   The control has Validators.required. Since 'John' is not empty, the control is valid, so valid is true.

3. Final Answer:

   dirty: true, touched: true, valid: true -> Option D

4. Quick Check:

   Changed + left + valid input = dirty, touched, valid true [OK]

Hint: Changed input + left focus + valid value = all true [OK]

Common Mistakes:

• Assuming dirty is false if user leaves input
• Confusing touched with dirty
• Thinking valid is false if user typed anything

4. You have this Angular template snippet:

<input type="text" formControlName="email">
<div *ngIf="form.controls.email.dirty && form.controls.email.valid">Valid email changed!</div>

But the message never shows even after typing a valid email. What is the likely problem?

medium

A. The form control is not marked as touched, so the message won't show.

B. The valid property is misspelled and should be isValid.

C. The form control might have an email validator, so valid is false.

D. The dirty property does not update on user input.

Solution

1. Step 1: Understand the condition for showing the message

   The message shows only if the control is both dirty and valid.

2. Step 2: Check if validation is set up

   If the form control has an email validator but the input doesn't pass it (even if it looks valid), valid is false, so the message won't appear.

3. Final Answer:

   The form control might have an email validator, so valid is false. -> Option C

4. Quick Check:

   Missing validator means valid stays false [OK]

Hint: Check validators if valid never becomes true [OK]

Common Mistakes:

• Thinking touched affects this condition
• Using wrong property names like isValid
• Assuming dirty never updates on input

5. You want to disable the submit button in an Angular reactive form until the user has changed at least one input and all inputs are valid. Which condition correctly implements this logic in the template?

<button [disabled]="???">Submit</button>

hard

A. [disabled]="form.pristine || form.invalid"

B. [disabled]="!form.touched || !form.valid"

C. [disabled]="form.touched && form.valid"

D. [disabled]="!form.dirty && !form.valid"

Solution

1. Step 1: Understand form state properties

   pristine means no changes made, opposite of dirty. invalid means form is not valid.

2. Step 2: Translate requirement to condition

   Disable button if form is pristine (no changes) or invalid (not valid). So disable when form.pristine || form.invalid.

3. Final Answer:

   [disabled]="form.pristine || form.invalid" -> Option A

4. Quick Check:

   Disable if no changes or invalid [OK]

Hint: Disable if pristine or invalid to require change and validity [OK]

Common Mistakes:

• Using dirty instead of pristine incorrectly
• Confusing valid with invalid
• Using touched instead of dirty/pristine