ReactiveFormsModule setup in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when submitting a form with empty required fields?

Consider an Angular component using ReactiveFormsModule with a form control marked as Validators.required. What will be the form's valid status and error state after submitting the form without entering any value?

Angular

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

@Component({
  selector: 'app-simple-form',
  template: `
    <form (ngSubmit)="onSubmit()">
      <input [formControl]="nameControl" placeholder="Name" />
      <button type="submit">Submit</button>
    </form>
    <p *ngIf="nameControl.invalid && nameControl.touched">Name is required.</p>
  `
})
export class SimpleFormComponent {
  nameControl = new FormControl('', Validators.required);

  onSubmit() {
    console.log('Form valid:', this.nameControl.valid);
    console.log('Errors:', this.nameControl.errors);
  }
}

A Form valid: true; Errors: { required: true }

B Form valid: true; Errors: null

C Form valid: false; Errors: null

D Form valid: false; Errors: { required: true }

💡 Hint

Think about what Validators.required does when the input is empty.

The Validators.required marks the control invalid if the value is empty. So the form control is invalid and the errors object contains { required: true }.

📝 Syntax

intermediate

Which option correctly imports ReactiveFormsModule in an Angular standalone component?

You want to use reactive forms in a standalone Angular component. Which import statement and component decorator setup is correct?

A

import { ReactiveFormsModule } from '@angular/forms';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule],
  selector: 'app-standalone',
  template: `<form></form>`
})
export class StandaloneComponent {}

B

import { FormsModule } from '@angular/forms';

@Component({
  standalone: true,
  imports: [FormsModule],
  selector: 'app-standalone',
  template: `<form></form>`
})
export class StandaloneComponent {}

C

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [ReactiveFormsModule],
  declarations: [StandaloneComponent]
})
export class StandaloneModule {}

@Component({
  selector: 'app-standalone',
  template: `<form></form>`
})
export class StandaloneComponent {}

D

import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-standalone',
  template: `<form></form>`
})
export class StandaloneComponent {}

💡 Hint

Standalone components require explicit imports of modules they use.

For standalone components, you must import ReactiveFormsModule in the imports array of the component decorator. Using FormsModule is for template-driven forms, not reactive forms.

❓ state_output

advanced

What is the value of the form control after patchValue with partial data?

Given a form group with two controls, what will be the value of the form after calling patchValue with only one control's value?

Angular

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

@Component({
  selector: 'app-patch-form',
  template: `<p>Check console for output</p>`
})
export class PatchFormComponent {
  form = new FormGroup({
    firstName: new FormControl('John'),
    lastName: new FormControl('Doe')
  });

  constructor() {
    this.form.patchValue({ firstName: 'Jane' });
    console.log(this.form.value);
  }
}

A { firstName: 'Jane' }

B { lastName: 'Doe' }

C { firstName: 'Jane', lastName: 'Doe' }

D {}

💡 Hint

Remember what patchValue does compared to setValue.

patchValue updates only the specified controls and leaves others unchanged. So firstName becomes 'Jane' and lastName remains 'Doe'.

🔧 Debug

advanced

Why does this form control's value not update on input?

In this Angular component using reactive forms, the input field does not update the form control's value when typing. What is the cause?

Angular

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

@Component({
  selector: 'app-input-debug',
  template: `<input [formControl]="nameControl" />`
})
export class InputDebugComponent {
  nameControl = new FormControl('');

  constructor() {
    this.nameControl.setValue('Initial');
  }
}

A The input uses [formControl] correctly; the issue is elsewhere.

B The form control is set programmatically in constructor, which blocks user input updates.

C The input is missing the 'ngModel' directive for two-way binding.

D The input is missing the 'formControlName' directive instead of 'formControl'.

💡 Hint

Check if the binding syntax matches reactive forms usage.

Using [formControl] on the input is the correct way to bind a FormControl in reactive forms. Setting the value in constructor does not block user input. The issue is not in the shown code.

🧠 Conceptual

expert

What happens if you forget to import ReactiveFormsModule in your Angular module?

You create a reactive form in a component but forget to import ReactiveFormsModule in your Angular module. What error or behavior will you observe when running the app?

A The form works normally without errors because ReactiveFormsModule is optional.

B Angular throws a template parse error: 'formControl' is not a known property of 'input'.

C The app compiles but the form controls do not update their values on input.

D Angular throws a runtime error about missing providers for FormControl.

💡 Hint

Think about what Angular needs to recognize formControl in templates.

If ReactiveFormsModule is not imported, Angular does not recognize the formControl directive in templates and throws a template parse error.

Practice

1. What is the main purpose of importing ReactiveFormsModule in an Angular module?

easy

A. To enable building and managing reactive forms with FormGroup and FormControl

B. To add routing capabilities to the Angular application

C. To provide HTTP client services for API calls

D. To enable template-driven forms only

Solution

1. Step 1: Understand the role of ReactiveFormsModule

   ReactiveFormsModule is specifically designed to enable reactive forms in Angular, allowing use of FormGroup and FormControl for form state management.

2. Step 2: Compare with other Angular modules

   Other modules like RouterModule or HttpClientModule serve different purposes such as routing or HTTP requests, not form management.

3. Final Answer:

   To enable building and managing reactive forms with FormGroup and FormControl -> Option A

4. Quick Check:

   ReactiveFormsModule = reactive forms support [OK]

Hint: ReactiveFormsModule is for reactive forms, not routing or HTTP [OK]

Common Mistakes:

• Confusing ReactiveFormsModule with RouterModule
• Thinking ReactiveFormsModule is for template-driven forms
• Assuming it provides HTTP services

2. Which of the following is the correct way to import ReactiveFormsModule in an Angular module?

easy

A. import { ReactiveFormsModule } from '@angular/platform-browser';

B. import { ReactiveFormsModule } from '@angular/forms';

C. import { ReactiveFormsModule } from '@angular/common';

D. import { ReactiveFormsModule } from '@angular/core';

Solution

1. Step 1: Identify the correct Angular package for ReactiveFormsModule

   ReactiveFormsModule is part of the '@angular/forms' package, which contains form-related classes.

2. Step 2: Verify other package names

   @angular/core is for core Angular features, @angular/common for common directives, and @angular/platform-browser for browser support, none contain ReactiveFormsModule.

3. Final Answer:

   import { ReactiveFormsModule } from '@angular/forms'; -> Option B

4. Quick Check:

   ReactiveFormsModule comes from '@angular/forms' [OK]

Hint: ReactiveFormsModule always imports from '@angular/forms' [OK]

Common Mistakes:

• Importing from '@angular/core' instead of '@angular/forms'
• Using '@angular/common' or '@angular/platform-browser' incorrectly
• Misspelling the module name

3. Given this Angular module snippet, what will happen when the app runs?

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

medium

A. The app will fail because ReactiveFormsModule is missing from imports

B. The app will only support template-driven forms

C. The app will throw a runtime error due to missing BrowserModule

D. The app can use reactive forms features like FormGroup and FormControl without errors

Solution

1. Step 1: Check module imports

   The module imports BrowserModule and ReactiveFormsModule, which are required for running the app and using reactive forms respectively.

2. Step 2: Confirm bootstrap and declarations

   AppComponent is declared and bootstrapped correctly, so the app starts properly.

3. Final Answer:

   The app can use reactive forms features like FormGroup and FormControl without errors -> Option D

4. Quick Check:

   ReactiveFormsModule imported = reactive forms work [OK]

Hint: If ReactiveFormsModule is in imports, reactive forms work [OK]

Common Mistakes:

• Assuming ReactiveFormsModule is missing when it is imported
• Confusing BrowserModule with ReactiveFormsModule
• Thinking template-driven forms are enabled by ReactiveFormsModule

4. Identify the error in this Angular module setup for reactive forms:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

medium

A. ReactiveFormsModule is imported but not added to the imports array

B. BrowserModule is missing from imports

C. AppComponent is not declared

D. NgModule decorator is missing

Solution

1. Step 1: Check imports array in NgModule

   ReactiveFormsModule is imported at the top but not included in the imports array, so reactive forms features won't work.

2. Step 2: Verify other parts

   BrowserModule is present, AppComponent is declared, and NgModule decorator is used correctly.

3. Final Answer:

   ReactiveFormsModule is imported but not added to the imports array -> Option A

4. Quick Check:

   ReactiveFormsModule must be in imports array [OK]

Hint: Import and add ReactiveFormsModule to imports array [OK]

Common Mistakes:

• Importing ReactiveFormsModule but forgetting to add it to imports array
• Removing BrowserModule accidentally
• Not declaring AppComponent

5. You want to create a form with two controls: username and email. Which setup correctly initializes the form using ReactiveFormsModule in your component?

hard

A. this.form = new FormGroup(['username', 'email']);

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

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

D. this.form = new FormControl('username', 'email');

Solution

1. Step 1: Understand FormGroup and FormControl usage

   FormGroup groups multiple FormControl instances. Each control is created with new FormControl(initialValue).

2. Step 2: Analyze each option

   this.form = new FormGroup({ username: new FormControl(''), email: new FormControl('') }); correctly creates a FormGroup with two FormControls for username and email. Options A, B, and D misuse FormControl or FormGroup constructors.

3. Final Answer:

   this.form = new FormGroup({ username: new FormControl(''), email: new FormControl('') }); -> Option C

4. Quick Check:

   FormGroup needs FormControl objects inside [OK]

Hint: FormGroup holds FormControls as object properties [OK]

Common Mistakes:

• Using FormControl with object instead of FormGroup
• Passing array instead of object to FormGroup
• Passing multiple strings to FormControl