Angular Forms: Observe Validity, Dirty and Touched as Separate States

Define a control and two separate rules

Create a practice label control with a required validator and an empty initial value. Write one rule describing acceptable input and another describing when the interface should display a validation message. These are related decisions, but they are not the same decision.

Choose feedback wording that helps the learner repair the value. Keep the field label visible and associated with the input. Do not use a red border alone as the only explanation of an error.

Record the untouched starting point

Inspect the initial value, validity, dirty and touched properties before interacting. A required empty control can be invalid while still pristine and untouched. Note whether your chosen feedback rule hides the error at this stage.

This initial observation prevents an easy misunderstanding: hidden feedback does not necessarily mean valid data. The display policy can postpone an error message while the underlying validator already knows that the value is missing.

Change one interaction at a time

Focus the field and move focus away without changing its value. Record the result. Next enter an invented label and inspect the state again. Finally clear the value through the interface and compare validity with the interaction flags.

Dirty describes a value changed through user interaction, while touched records the relevant blur interaction. Programmatic changes can follow different state-management rules. Keep the exact action in your worksheet rather than predicting state only from the final text.

Test reset and submission feedback deliberately

Reset the form and record both its value and interaction flags. If the example offers a submit control, decide how an attempted submission exposes fields that need correction. Do not silently reinterpret the required validator merely to change message timing.

Keep server-side input enforcement as a separate boundary in the notes. A browser form can be modified or bypassed, so client validation does not establish permission to accept a value on the server. This local exercise does not implement that server contract.

Review the state worksheet

• The initial invalid-but-untouched case is included.
• Blur without editing is distinguished from changing a value.
• Each displayed error follows an explicit feedback rule.
• Reset behaviour is observed rather than guessed.
• Validity is kept separate from server acceptance.

Use observations in a project explanation

Save the action sequence and expected flags beside the form. The record helps someone reproduce a feedback issue without guessing which interaction happened first. Mango Engineers’ Angular course includes form foundations; confirm the current entry level and practical sequence with the team.