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.