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.

Practice

1. Which form approach in Angular is best suited for simple forms managed mostly in HTML?

easy

A. Reactive forms

B. Both are equally complex

C. Template-driven forms

D. Neither, Angular does not support forms

Solution

1. Step 1: Understand form complexity

   Simple forms with minimal logic are easier to manage directly in HTML templates.

2. Step 2: Match form type to complexity

   Template-driven forms are designed for this use case, relying on Angular directives in HTML.

3. Final Answer:

   Template-driven forms -> Option C

4. Quick Check:

   Simple forms = Template-driven forms [OK]

Hint: Simple HTML forms use template-driven approach [OK]

Common Mistakes:

• Confusing reactive forms as simpler
• Thinking both are equally suited for simple forms
• Believing Angular doesn't support template forms

2. Which syntax correctly initializes a reactive form in Angular's TypeScript component?

easy

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

B. this.form = new NgForm({ name: '' });

C. this.form = new TemplateForm({ name: '' });

D. this.form = new FormBuilder({ name: '' });

Solution

1. Step 1: Recall reactive form initialization

   Reactive forms use FormGroup and FormControl classes to define form structure in TypeScript.

2. Step 2: Identify correct syntax

   this.form = new FormGroup({ name: new FormControl('') }); correctly creates a FormGroup with a FormControl named 'name'.

3. Final Answer:

   this.form = new FormGroup({ name: new FormControl('') }); -> Option A

4. Quick Check:

   Reactive form init uses FormGroup and FormControl [OK]

Hint: Reactive forms use FormGroup and FormControl classes [OK]

Common Mistakes:

• Using NgForm which is for template forms
• Confusing FormBuilder usage without calling group()
• Trying to initialize reactive forms like template forms

3. Given this reactive form code snippet, what will be the output of console.log(this.form.value) after setting this.form.controls['email'].setValue('[e-mail]')?

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

medium

A. { email: '[e-mail]' }

B. { email: '' }

C. undefined

D. Error: controls is not defined

Solution

1. Step 1: Understand form initialization

   The form is initialized with an 'email' control starting as an empty string.

2. Step 2: Setting control value

   Calling setValue on 'email' updates its value to '[e-mail]'.

3. Step 3: Checking form value output

   Logging form.value returns an object with the current control values, so it shows the updated email.

4. Final Answer:

   { email: '[e-mail]' } -> Option A

5. Quick Check:

   Reactive form values reflect control updates [OK]

Hint: FormGroup.value shows current control values [OK]

Common Mistakes:

• Expecting empty string after setValue call
• Confusing controls property access
• Assuming form.value is undefined before submit

4. Identify the error in this template-driven form snippet:

<form #myForm="ngForm">
  <input name="username" ngModel>
  <button type="submit">Submit</button>
</form>

medium

A. Missing 'name' attribute on input element

B. No error, the form is correct

C. Missing 'ngModel' directive on input element

D. Form tag missing 'ngForm' directive

Solution

1. Step 1: Check input element attributes

   The input has both 'name' and 'ngModel' directives, which are required for template-driven forms.

2. Step 2: Check form tag

   The form uses '#myForm="ngForm"' which correctly references the Angular form directive.

3. Final Answer:

   No error, the form is correct -> Option B

4. Quick Check:

   Template form with name and ngModel is valid [OK]

Hint: Template forms need name and ngModel on inputs [OK]

Common Mistakes:

• Forgetting name attribute on inputs
• Confusing ngForm with reactive form syntax
• Assuming form tag needs extra directives

5. You need to build a complex form with dynamic validation and conditional fields in Angular. Which form approach should you choose and why?

hard

A. Use plain HTML forms without Angular features

B. Template-driven forms, because they are simpler to write in HTML

C. Either approach works equally well for complex dynamic forms

D. Reactive forms, because they allow better control and dynamic logic in TypeScript

Solution

1. Step 1: Analyze form complexity and requirements

   Complex forms with dynamic validation and conditional fields require programmatic control.

2. Step 2: Match form approach to needs

   Reactive forms provide APIs in TypeScript to add/remove controls and validations dynamically.

3. Step 3: Compare with template-driven forms

   Template-driven forms are less suited for complex logic as they rely mostly on HTML directives.

4. Final Answer:

   Reactive forms, because they allow better control and dynamic logic in TypeScript -> Option D

5. Quick Check:

   Complex dynamic forms = Reactive forms [OK]

Hint: Use reactive forms for complex, dynamic form logic [OK]

Common Mistakes:

• Choosing template forms for complex dynamic needs
• Assuming both approaches handle dynamic validation equally
• Ignoring benefits of TypeScript control in reactive forms