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.