Form state tracking (dirty, touched, valid) in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the 'dirty' state mean in Angular forms?

The 'dirty' state means the user has changed the value of a form control since it was first displayed.

beginner

Explain the 'touched' state in Angular form controls.

A form control is 'touched' when the user has focused on it and then moved focus away (blurred).

beginner

What does it mean if a form control is 'valid'?

A form control is 'valid' if it passes all the validation rules set on it, like required fields or pattern matching.

intermediate

How can you check if a form is dirty in Angular?

You can check the form's 'dirty' property, for example: formGroup.dirty returns true if any control has been changed.

intermediate

Why is tracking 'touched' state useful in forms?

Tracking 'touched' helps show validation messages only after the user has interacted with a field, improving user experience.

Which Angular form state indicates the user has changed a field value?

A pristine

B touched

C valid

D dirty

The 'dirty' state means the user changed the value. 'Touched' means the field was focused and blurred.

What does the 'touched' state represent in Angular forms?

A Field has been focused and then blurred

B Field is valid

C Field value changed

D Field is empty

'Touched' means the user focused on the field and then moved away from it.

If a form control is valid, what does it mean?

A Control has been touched

B Control passes all validation rules

C User has typed something

D Control is empty

A valid control meets all validation requirements like required or pattern.

Which property would you check to see if a form has never been changed?

A dirty

B touched

C pristine

D valid

'Pristine' means the form or control has not been changed by the user.

Why might you wait to show validation errors until a control is 'touched'?

A To avoid showing errors before user interacts

B To mark the form as valid

C To reset the form

D To disable the submit button

Showing errors only after 'touched' improves user experience by not showing errors too early.

Describe the differences between 'dirty', 'touched', and 'valid' states in Angular forms.

Think about user actions and validation results.

How would you use form state tracking to improve user experience in a form?

Consider when to show errors and when to allow submission.