State and Error Management

Master how to track form states and provide clear, dynamic error feedback in Angular for a perfect user experience.

Lesson ProgressStep 1 of 7
⭐ 0 EXP

Welcome! Let's visualize how Angular tracks form states in real-time. This input field is currently 'pristine' and 'untouched'.

/* State: PENDING */
/* User has not interacted yet */

Control Properties

Angular `FormControl` instances come with a set of boolean properties that describe the current state of the control. These are essential for logic and UI updates.

  • valid: True if all validation checks pass.
  • invalid: True if at least one check fails.
  • pending: True during async validation.
  • disabled: True if the control is disabled (ignoring validation).

System Check

If a form control has a 'required' validator and the input is empty, what is the value of 'control.valid'?

Advanced Holo-Simulations

⭐ 0 EXP

Apply your knowledge in these advanced simulations. All our content is free!

Achievements

🧠
State Master

Demonstrate understanding of valid, touched, and dirty states.

🛡️
UX Protector

Implement user-friendly error display logic.

💬
Feedback Guru

Correctly identify error keys in the template.

Mission: Implement UX-Friendly Validation

Complete the template. Show a validation error message for the email control, but ONLY if the control is invalid AND has been touched by the user.

A.D.A. Feedback:

> Awaiting input...

Challenge: Categorize Concepts

Drag the items to group all Form State Properties at the top, and Validation Error Keys at the bottom.

touched (Property)
required (Validator)
dirty (Property)
minlength (Validator)

Challenge: Complete the Template

Fill in the missing properties to correctly display the error message.

<div *ngIf="name. && name.">
<small *ngIf="name.errors?.['']">Name required</small>
</div>

Consult A.D.A. (Angular Dev Assistant)

Community Holo-Net

Peer Project Review

Submit your "Dynamic Form Feedback" project for review.

Support Us

Advanced Error Handling Strategies in Angular

Good error handling goes beyond showing a single message. Angular's reactive forms allow for sophisticated, user-friendly feedback systems. By leveraging the state properties we've discussed, you can guide the user through a form without frustration.

The Hierarchy of State: When to Show What?

The most common mistake beginners make is showing errors too aggressively. If a form loads and immediately lights up with red borders because the required fields are empty, the user feels scolded before they've even started.

✔️ Good Practice

*ngIf="control.invalid && (control.dirty || control.touched)"

Wait for interaction (touched) or data entry (dirty).

❌ Bad Practice

*ngIf="control.invalid"

Shows error immediately on page load.

Multiple Validation Rules

A field often has multiple rules (e.g., "Required" AND "MinLength"). Angular stores these in the `errors` object. You can access specific keys to show tailored messages.

  • `control.errors?.['required']`: The field is empty.
  • `control.errors?.['minlength']`: The text is too short.
  • `control.errors?.['email']`: The format is wrong.

Using the `?` (safe navigation operator) is crucial because `control.errors` is `null` when the control is valid.

Pro Tip: Create a reusable `<app-field-error>` component that takes the FormControl as an input. Centralize your error logic there so you don't have to repeat `*ngIf` blocks for every input in your application.

Angular Form State Glossary

control.valid
A boolean that is `true` if the control passes all validation checks.
control.invalid
The opposite of valid. `true` if at least one validator fails.
control.touched
`true` if the user has triggered a `blur` event (left the field) at least once.
control.untouched
`true` if the control has not yet lost focus.
control.dirty
`true` if the user has modified the value in the UI. Note: changing it back to the original value does not reset this to false.
control.pristine
`true` if the user has not yet modified the value.
control.errors
An object containing validation errors (e.g., `{'required': true}`). If valid, this is `null`.
control.pending
`true` if an async validator is currently running (e.g., checking if a username is taken on the server).

About the Author

Author's Avatar

Tandgo

Angular experts dedicated to building enterprise-grade applications.

This article was written and reviewed by our team of frontend experts, who have years of experience teaching Angular and building robust web applications.

Verification and Updates

Last reviewed: October 2025.

We strive to keep our content accurate and up-to-date. This tutorial is based on the latest Angular specifications.

External Resources

Found an error or have a suggestion? Contact us!