Form state tracking (dirty, touched, valid) in Angular - Step-by-Step Execution

Concept Flow - Form state tracking (dirty, touched, valid)

User focuses input

↓

User changes input value

↓

Control becomes dirty

↓

User blurs input

↓

Control becomes touched

↓

Control is valid or invalid

↓

Form state updates

This flow shows how Angular tracks form control states: when a user focuses, changes, and leaves an input, Angular updates touched, dirty, and valid states accordingly.

Execution Sample

Angular

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

@Component({ selector: 'app-form', standalone: true, template: `
  <input [formControl]="nameControl" aria-label="Name input" />
  <p *ngIf="nameControl.touched && nameControl.invalid">Name is required.</p>
` })
export class FormComponent {
  nameControl = new FormControl('', Validators.required);
}

This Angular component tracks a name input's touched, dirty, and valid states with a required validator.

Execution Table

Step	User Action	touched	dirty	valid	Message Shown
1	Page loads, input empty	false	false	false	No
2	User focuses input	false	false	false	No
3	User types 'A'	false	true	true	No
4	User deletes input (empty)	false	true	false	No
5	User blurs input	true	true	false	Yes
6	User types 'John'	true	true	true	No

💡 User finishes interaction; form control states reflect user input and validation.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6
touched	false	false	false	false	true	true
dirty	false	false	true	true	true	true
valid	false	false	true	false	false	true

Key Moments - 3 Insights

Why does 'touched' become true only after the user blurs, not just on focus?

'touched' becomes true when the user leaves the input after focusing it, not immediately on focus. In the execution_table, after step 2 (focus), touched is still false; it becomes true after blurring (step 5).

Why is 'dirty' false at first and true after typing?

'dirty' means the user changed the input value from its initial state. Initially (step 1 and 2), no changes happened, so dirty is false. After typing (step 3), dirty becomes true as shown in the table.

When does the control become invalid?

The control is invalid when the input is empty but required. At step 4 and 5, the input is empty, so valid is false, triggering the error message.

Visual Quiz - 3 Questions

Look at the execution table, what is the 'dirty' state after the user focuses the input but before typing?

A true

B false

C undefined

D null

💡 Hint

Check the 'dirty' column at Step 2 in the execution_table.

At which step does the control become invalid?

A Step 3

B Step 2

C Step 4

D Step 6

💡 Hint

Look at the 'valid' column and 'Message Shown' in the execution_table.

If the user never types anything and blurs the input, what would the 'touched' and 'dirty' states be?

A touched: true, dirty: false

B touched: false, dirty: false

C touched: true, dirty: true

D touched: false, dirty: true

💡 Hint

Recall that 'touched' updates on blur, 'dirty' only on value change.

Concept Snapshot

Angular Form Control states:
- touched: true after input loses focus
- dirty: true after input value changes
- valid: true if input passes validators
Use these to show validation messages and track user interaction.

Full Transcript

This visual execution shows how Angular tracks form control states: touched, dirty, and valid. Initially, all states are false. When the user focuses the input, touched remains false until the input loses focus. Typing changes the value, setting dirty to true. Validation runs after each change, updating valid. If the input is empty but required, valid becomes false, showing an error message. This helps developers give feedback only after user interaction.