Reactive forms vs template forms decision in Angular - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

When to prefer reactive forms over template-driven forms?

Which scenario best justifies choosing reactive forms instead of template-driven forms in Angular?

A When you need fine-grained control over form state and complex validation logic

B When you want to use two-way data binding with ngModel for quick setup

C When you want to write less TypeScript code and rely mostly on HTML

D When the form is simple with few fields and minimal validation

💡 Hint

Think about which form type offers more programmatic control and scalability.

Reactive forms provide explicit and fine-grained control over form state and validation in TypeScript, making them ideal for complex forms. Template-driven forms are simpler and rely more on HTML and directives.

❓ component_behavior

intermediate

Behavior difference in form value updates

In Angular, which form type updates the form model immediately on each input change?

A Reactive forms update the model only after form submission

B Reactive forms update the model immediately on input change

C Template-driven forms update the model immediately on input change

D Both reactive and template-driven forms update the model only after blur event

💡 Hint

Consider which form type uses observables to track changes instantly.

Reactive forms use observables and update the form model immediately as the user types. Template-driven forms update the model on blur or on form submission.

📝 Syntax

advanced

Correct way to create a reactive form group

Which code snippet correctly creates a reactive form group with a required 'email' field in Angular?

Angular

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

// Choose the correct initialization

A this.form = new FormGroup({ email: new FormControl('', Validators.required()) });

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

C this.form = new FormGroup({ email: new FormControl('', { Validators.required }) });

D this.form = new FormGroup({ email: new FormControl('', [Validators.required]) });

💡 Hint

Validators.required is a function reference and should be passed inside an array for multiple validators.

Validators.required is passed as a function reference inside an array to the FormControl constructor. Option D correctly uses [Validators.required]. Option D misses the array, which is allowed but less flexible. Option D calls Validators.required as a function which is incorrect. Option D uses wrong syntax with curly braces.

🔧 Debug

advanced

Why does this reactive form not validate the email field?

Given this reactive form setup, why does the email field not show validation errors when empty? this.form = new FormGroup({ email: new FormControl('', Validators.required) });

A Validators.required should be passed inside an array, like [Validators.required]

B The form control is missing an initial value, so validation won't trigger

C The form control is missing a call to markAsTouched() to trigger validation display

D The form control is missing the updateOn option set to 'blur'

💡 Hint

Think about when Angular shows validation errors in the UI.

Angular shows validation errors only after the control is touched or dirty. Without calling markAsTouched() or user interaction, errors won't display. Passing Validators.required directly is valid. Initial value can be empty string. updateOn is optional.

❓ lifecycle

expert

Reactive form valueChanges subscription behavior

What happens if you subscribe to a reactive form's valueChanges observable inside ngOnInit without unsubscribing on component destroy?

A Memory leaks can occur because the subscription stays active after component destruction

B The subscription will throw an error when the component is destroyed

C No issues occur; Angular automatically cleans up subscriptions

D The subscription will only emit once and then complete automatically

💡 Hint

Consider Angular's behavior with observables and component lifecycle.

Angular does not automatically unsubscribe from observables like valueChanges. If you don't unsubscribe manually, the subscription stays active, causing memory leaks. It does not throw errors or complete automatically.