Why forms matter in Angular - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Angular handle form input changes?

Consider an Angular standalone component using signals to track form input. What happens when a user types in an input bound to a signal?

Angular

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

@Component({
  selector: 'app-simple-form',
  standalone: true,
  template: `<input [value]="name()" (input)="name.set($any($event.target).value)" />
             <p>Hello, {{ name() }}!</p>`
})
export class SimpleFormComponent {
  name = signal('');
}

A The displayed greeting updates immediately as the user types.

B The greeting updates only after the input loses focus.

C The greeting never updates because signals don't track input events.

D The input value resets to empty after each keystroke.

💡 Hint

Think about how signals react to changes and how Angular updates the template.

Signals in Angular track reactive state. When the input event updates the signal, Angular re-renders the template immediately, showing the new greeting.

🧠 Conceptual

intermediate

Why use Angular's FormControl over native inputs?

What is a key advantage of using Angular's FormControl for form inputs instead of just native HTML inputs?

A FormControl disables browser autofill features.

B FormControl automatically styles inputs with CSS.

C FormControl provides built-in validation and state tracking like touched and dirty.

D FormControl converts inputs into buttons automatically.

💡 Hint

Think about what extra features Angular forms add beyond plain HTML inputs.

FormControl tracks input value, validation status, and user interaction states, enabling easier form validation and feedback.

📝 Syntax

advanced

Identify the correct way to create a reactive form in Angular

Which code snippet correctly creates a reactive form with a single control named 'email' initialized to an empty string?

A this.form = FormGroup({ email: FormControl('') });

B this.form = new FormGroup({ email: new FormControl('') });

C this.form = new FormControl({ email: '' });

D this.form = new FormGroup(['email' => new FormControl('')]);

💡 Hint

Remember the syntax for creating a FormGroup with controls.

FormGroup requires an object mapping control names to FormControl instances. Option B uses the correct syntax.

🔧 Debug

advanced

Why does this Angular form not update the model?

Given this template snippet: Why might the form model not update as expected?

Angular

<input [formControl]="emailControl" (input)="emailControl.setValue($event.target.value)" />

A The setValue method requires a second argument for options.

B The formControl directive is missing a name attribute.

C The input element must use [(ngModel)] instead of formControl.

D The (input) event handler is redundant and can cause unexpected behavior.

💡 Hint

Think about how formControl already listens to input events.

Using both [formControl] and manually setting value on input event duplicates updates and can cause issues. The formControl directive alone handles input changes.

❓ lifecycle

expert

When does Angular validate a form control in a reactive form?

In Angular reactive forms, at what point does validation run on a FormControl by default?

A Validation runs immediately when the FormControl value changes.

B Validation runs only after the control loses focus.

C Validation runs only when the form is submitted.

D Validation runs only when manually triggered by the developer.

💡 Hint

Consider how Angular keeps the form state updated as the user types.

Angular runs validation automatically whenever the FormControl's value changes, keeping validation state current.