Form state tracking (dirty, touched, valid) in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the form's valid state after user interaction?

Consider an Angular standalone form with a required input field. The user focuses the input, types a valid value, then blurs the input.

What will be the valid state of the form after these actions?

Angular

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

@Component({
  selector: 'app-simple-form',
  standalone: true,
  template: `
    <form [formGroup]="form">
      <input formControlName="name" />
    </form>
  `
})
export class SimpleFormComponent {
  form = new FormGroup({
    name: new FormControl('', Validators.required)
  });
}

A The form is invalid because the input is dirty but not touched.

B The form is invalid because the input is still marked as untouched.

C The form is valid because the input has a non-empty value that meets the required validator.

D The form is valid only if the input is touched and dirty.

💡 Hint

Remember that valid depends on validators, not on touched or dirty states.

The valid state reflects whether the form controls pass their validators. Since the input has a non-empty value and the required validator is satisfied, the form is valid regardless of touched or dirty states.

❓ state_output

intermediate

What is the dirty state of the form after initialization?

Given an Angular reactive form initialized with default values, what is the dirty state of the form immediately after creation?

Angular

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

@Component({
  selector: 'app-init-form',
  standalone: true,
  template: `<form [formGroup]="form"></form>`
})
export class InitFormComponent {
  form = new FormGroup({
    email: new FormControl('[e-mail]')
  });
}

A The form is pristine because no user changes have been made yet.

B The form is invalid because the control has a value but no validators.

C The form is touched because the control has a value.

D The form is dirty because it has initial values.

💡 Hint

Think about what dirty means: user changed the value or not.

The dirty state is false initially because the form's value has not been changed by the user. The form is pristine until a user modifies any control.

🔧 Debug

advanced

Why does the form's touched state remain false after input blur?

In this Angular form, the input loses focus but the form's touched state remains false. What is the most likely cause?

Angular

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

@Component({
  selector: 'app-debug-form',
  standalone: true,
  template: `
    <form [formGroup]="form">
      <input />
    </form>
  `
})
export class DebugFormComponent {
  form = new FormGroup({
    username: new FormControl('', Validators.required)
  });
}

A The input element is missing the <code>formControlName</code> directive, so Angular can't track touch events.

B The form control is disabled, so touch events are ignored.

C The input element is not inside the <code>form</code> tag, so touch events are not registered.

D The user did not actually focus and blur the input, so touched remains false.

💡 Hint

Check if Angular can connect the input to the form control properly.

If the input lacks the formControlName directive, Angular does not link it to the form control, so it cannot update the touched state on blur.

🧠 Conceptual

advanced

How does Angular determine a form control is dirty?

Which of the following best describes when Angular marks a form control as dirty?

A When the control's value is programmatically set using <code>setValue</code>.

B When the control's value changes from its initial value due to user interaction.

C When the control is blurred after being focused.

D When the control receives focus for the first time.

💡 Hint

Think about what user action changes the control's state.

Angular marks a control as dirty only when the user changes its value from the initial one. Programmatic changes do not mark it dirty.

📝 Syntax

expert

Which code snippet correctly checks if a form is valid and dirty in Angular 17+ standalone component?

Choose the correct Angular code to conditionally enable a submit button only if the form is valid and dirty.

Angular

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

@Component({
  selector: 'app-submit-form',
  standalone: true,
  template: `
    <form [formGroup]="form">
      <input formControlName="email" />
      <button [disabled]="???">Submit</button>
    </form>
  `
})
export class SubmitFormComponent {
  form = new FormGroup({
    email: new FormControl('', [Validators.required, Validators.email])
  });
}

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

B [disabled]="form.valid && form.dirty"

C [disabled]="!form.valid || form.pristine"

D [disabled]="form.invalid || !form.dirty"

💡 Hint

The button should be disabled if the form is invalid or not dirty.

The submit button should be disabled when the form is invalid or when the user has not changed any values (not dirty). Option D correctly expresses this logic.

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