Testing forms and user interactions in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a user submits a form with invalid inputs?

Consider an Angular standalone component with a reactive form that requires a non-empty email input. What will be the form's valid status and error state after submitting the form with an empty email field?

Angular

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

@Component({
  selector: 'app-email-form',
  standalone: true,
  template: `
    <form [formGroup]="emailForm" (ngSubmit)="onSubmit()">
      <input formControlName="email" placeholder="Email" aria-label="Email input" />
      <button type="submit">Submit</button>
      <div *ngIf="emailForm.controls.email.invalid && emailForm.controls.email.touched">
        Email is required.
      </div>
    </form>
  `
})
export class EmailFormComponent {
  emailForm = new FormGroup({
    email: new FormControl('', [Validators.required, Validators.email])
  });

  onSubmit() {
    this.emailForm.markAllAsTouched();
    console.log('Form valid:', this.emailForm.valid);
    console.log('Email errors:', this.emailForm.controls.email.errors);
  }
}

A The form is invalid, but the email control has no errors because it was not touched.

B The form is invalid, and the email control has an error object indicating 'required' and 'email' validation failures.

C The form is valid because the submit button was clicked, and the email control has no errors.

D The form is valid, but the email control has an error object indicating 'required' validation failure.

💡 Hint

Think about what Angular does when a required field is empty and the form is submitted.

When the form is submitted with an empty email, Angular marks the control as touched and runs validators. Since the email is empty, the required and email validators fail, making the form invalid and the control's errors object contain these validation errors.

❓ state_output

intermediate

What is the value of the form control after user input?

Given a template-driven Angular form with an input bound to ngModel, what will be the value of the username property after the user types 'Alice' into the input?

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-form',
  standalone: true,
  template: `
    <form>
      <input name="username" [(ngModel)]="username" aria-label="Username input" />
    </form>
    <p>Username: {{ username }}</p>
  `
})
export class UserFormComponent {
  username = '';
}

A The username property will be null because the input is not inside a form tag.

B The username property remains an empty string because ngModel does not update automatically.

C The username property will be undefined because the input lacks a form control.

D The username property will be 'Alice' after the user types it.

💡 Hint

Remember how two-way binding with [(ngModel)] works in Angular.

The [(ngModel)] directive binds the input's value to the username property. When the user types 'Alice', the property updates immediately to that string.

📝 Syntax

advanced

Which option correctly disables a submit button when the form is invalid?

In an Angular reactive form, you want to disable the submit button if the form is invalid. Which template snippet correctly implements this behavior?

Angular

<form [formGroup]="myForm" (ngSubmit)="submit()">
  <button type="submit" [disabled]="???">Submit</button>
</form>

A [disabled]="myForm.invalid"

B [disabled]="!myForm.valid"

C [disabled]="myForm.status === 'INVALID'"

D [disabled]="myForm.controls.submit.disabled"

💡 Hint

Check the form group's properties that indicate validity.

The invalid property is a boolean that is true when the form is invalid. Binding [disabled]="myForm.invalid" disables the button correctly. Option A is logically equivalent but less direct. Option A compares a string which is valid but less common. Option A is incorrect because submit is not a control.

🔧 Debug

advanced

Why does the form not update the model on input change?

In this Angular template-driven form, the input value changes but the component property does not update. What is the cause?

Angular

<form>
  <input name="email" [(ngModel)]="email" aria-label="Email input" />
</form>

export class EmailComponent {
  email = '';
}

A The FormsModule is not imported in the module, so ngModel does not work.

B The input is missing a type attribute, so Angular ignores the binding.

C The email property is not initialized, so it cannot update.

D The input lacks a formControlName directive, so it cannot bind.

💡 Hint

Check module imports related to forms.

For template-driven forms and ngModel to work, the FormsModule must be imported in the Angular module. Without it, Angular does not recognize the directive and the model does not update.

🧠 Conceptual

expert

How does Angular's signal-based form state improve user interaction testing?

Angular 17 introduced signals for reactive forms. How does using signals for form state improve testing user interactions compared to traditional observables?

A Signals replace the need for form controls, so forms become static and easier to test.

B Signals automatically mock user events, so no manual event simulation is needed in tests.

C Signals provide synchronous, immediate access to form state, making tests simpler and more predictable without needing async handling.

D Signals delay form state updates until after tests complete, preventing race conditions.

💡 Hint

Think about how signals differ from observables in timing and access.

Signals provide synchronous and immediate access to reactive form state, unlike observables which require subscriptions and asynchronous handling. This makes writing tests for user interactions more straightforward and less error-prone.