FormBuilder service in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular form control value?

Given this Angular component code using FormBuilder, what will be the value of this.myForm.value after initialization?

Angular

import { Component, inject } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-sample',
  template: ``,
  standalone: true
})
export class SampleComponent {
  fb = inject(FormBuilder);
  myForm = this.fb.group({
    firstName: ['John'],
    lastName: ['Doe']
  });
}

A {"firstName": null, "lastName": null}

B {"firstName": ["John"], "lastName": ["Doe"]}

C {"firstName": "John", "lastName": "Doe"}

D {}

💡 Hint

Remember that FormBuilder initializes controls with the values inside the array.

The FormBuilder group method creates a form group with controls initialized to the values inside the arrays. So the form value is an object with keys and their initial values.

📝 Syntax

intermediate

Which option correctly creates a FormGroup with a required validator on 'email' using FormBuilder?

Select the code snippet that correctly uses FormBuilder to create a form group with an 'email' control that has a required validator.

A this.fb.group({ email: ['', [Validators.required]] })

B this.fb.group({ email: ['', Validators.required] })

C this.fb.group({ email: ['', Validators.required()] })

D this.fb.group({ email: ['', Validators.required] }, Validators.email)

💡 Hint

Validators should be passed as an array when multiple or single validators are used.

The correct syntax for validators in FormBuilder is to pass an array of validators as the second element in the control array. Option A correctly wraps Validators.required in an array.

❓ state_output

advanced

What is the value of 'username' control after patchValue call?

Consider this Angular component snippet. What will be the value of the 'username' control after this.myForm.patchValue({ username: 'alice' }) is called?

Angular

import { Component, inject } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-user',
  template: ``,
  standalone: true
})
export class UserComponent {
  fb = inject(FormBuilder);
  myForm = this.fb.group({
    username: ['bob'],
    age: [30]
  });

  updateUsername() {
    this.myForm.patchValue({ username: 'alice' });
  }
}

A "alice"

B "bob"

C null

D undefined

💡 Hint

patchValue updates only specified controls without affecting others.

The patchValue method updates the specified control's value. Here, 'username' changes from 'bob' to 'alice'.

🔧 Debug

advanced

Why does this FormBuilder code cause a runtime error?

Examine the following code snippet. Why will it cause a runtime error when the component initializes?

Angular

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

@Component({
  selector: 'app-login',
  template: ``,
  standalone: true
})
export class LoginComponent {
  fb = inject(FormBuilder);
  loginForm = this.fb.group({
    email: ['', Validators.required, Validators.email]
  });
}

A FormBuilder group method requires controls to be strings, not arrays.

B Validators must be passed as an array, not as separate arguments.

C The FormBuilder instance is not injected properly.

D Validators.required and Validators.email cannot be used together.

💡 Hint

Check how validators are passed in FormBuilder control arrays.

The FormBuilder control array expects the second element to be a single validator or an array of validators. Passing multiple validators as separate arguments causes an error.

🧠 Conceptual

expert

What happens if you use FormBuilder to create nested FormGroups incorrectly?

Consider this code snippet. What error or behavior will occur when trying to access this.profileForm.get('address.street')?

Angular

import { Component, inject } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-profile',
  template: ``,
  standalone: true
})
export class ProfileComponent {
  fb = inject(FormBuilder);
  profileForm = this.fb.group({
    name: [''],
    address: this.fb.control({
      street: [''],
      city: ['']
    })
  });
}

A It will return undefined because 'address' is not defined.

B It will return the FormControl for 'street' correctly.

C It will throw a runtime error due to invalid FormBuilder usage.

D It will return null because 'address' is a FormControl, not a FormGroup.

💡 Hint

Check the difference between FormControl and FormGroup in FormBuilder.

The code uses this.fb.control to create 'address', which makes it a FormControl holding an object, not a FormGroup. So get('address.street') returns null.

Practice

1. What is the main purpose of Angular's FormBuilder service?

easy

A. To send form data directly to the server

B. To style forms with CSS classes automatically

C. To create reactive forms easily with less code

D. To generate HTML form elements dynamically

Solution

1. Step 1: Understand FormBuilder's role

   FormBuilder is a service in Angular that helps create reactive forms quickly and cleanly.

2. Step 2: Compare options with FormBuilder's purpose

   Only To create reactive forms easily with less code correctly describes that FormBuilder helps build forms easily with less code.

3. Final Answer:

   To create reactive forms easily with less code -> Option C

4. Quick Check:

   FormBuilder = create reactive forms easily [OK]

Hint: FormBuilder builds forms, not styles or sends data [OK]

Common Mistakes:

• Confusing FormBuilder with styling tools
• Thinking FormBuilder sends data to server
• Assuming FormBuilder creates HTML elements

2. Which of the following is the correct way to inject FormBuilder in an Angular component constructor?

easy

A. constructor(private fb = new FormBuilder()) {}

B. constructor(private fb: FormBuilder) {}

C. constructor(FormBuilder fb) {}

D. constructor(fb: FormBuilder) {}

Solution

1. Step 1: Recall Angular dependency injection syntax

   Angular injects services by declaring them as private/public in the constructor with type.

2. Step 2: Identify correct syntax for FormBuilder injection

   constructor(private fb: FormBuilder) {} uses correct TypeScript and Angular DI syntax: private fb: FormBuilder.

3. Final Answer:

   constructor(private fb: FormBuilder) {} -> Option B

4. Quick Check:

   Inject FormBuilder with private and type [OK]

Hint: Use private and type in constructor for DI [OK]

Common Mistakes:

• Using new keyword inside constructor
• Missing access modifier (private/public)
• Incorrect parameter order or syntax

3. Given this code snippet, what will be the initial value of the form control named email?

this.form = this.fb.group({
  email: ['[e-mail]'],
  password: ['']
});

medium

A. '[e-mail]'

B. undefined

C. null

D. An empty string

Solution

1. Step 1: Understand FormBuilder group initialization

   The email control is initialized with the array containing the string '[e-mail]'.

2. Step 2: Identify initial value of the control

   The first element in the array is the initial value, so the email control starts with '[e-mail]'.

3. Final Answer:

   '[e-mail]' -> Option A

4. Quick Check:

   Initial control value = first array element [OK]

Hint: First array item is initial form control value [OK]

Common Mistakes:

• Assuming empty string as default
• Confusing null or undefined as initial value
• Ignoring array syntax for initial value

4. What is wrong with this Angular FormBuilder code?

this.form = this.fb.group({
  username: '',
  age: this.fb.control(0)
});

medium

A. Age control cannot have initial value 0

B. Mixing shorthand and explicit control creation causes error

C. Cannot use this.fb.control inside group

D. Missing array brackets for username control initialization

Solution

1. Step 1: Check FormBuilder group syntax rules

   Each control should be initialized with an array or a FormControl instance.

2. Step 2: Identify issue with username control

   Username is initialized as a string directly, missing array brackets or FormControl wrapper.

3. Final Answer:

   Missing array brackets for username control initialization -> Option D

4. Quick Check:

   Controls need array or FormControl, not plain string [OK]

Hint: Use array or FormControl for each control in group [OK]

Common Mistakes:

• Using plain values without array or FormControl
• Thinking mixed syntax causes error
• Believing zero is invalid initial value

5. You want to create a form with name and email controls using FormBuilder. The email must be required and valid email format. Which code correctly sets up this form with validators?

hard

A. this.form = this.fb.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]] });

B. this.form = this.fb.group({ name: ['', Validators.email], email: ['', Validators.required] });

C. this.form = this.fb.group({ name: ['', [Validators.required, Validators.email]], email: ['', Validators.required] });

D. this.form = this.fb.group({ name: ['', []], email: ['', Validators.email] });

Solution

1. Step 1: Understand validator requirements

   Name must be required; email must be required and valid email format.

2. Step 2: Check each option's validators

   this.form = this.fb.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]] }); correctly applies Validators.required to name and both Validators.required and Validators.email to email.

3. Final Answer:

   this.form = this.fb.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]] }); -> Option A

4. Quick Check:

   Required + email validators on email control [OK]

Hint: Use array for multiple validators on a control [OK]

Common Mistakes:

• Swapping validators between controls
• Not using array for multiple validators
• Missing required validator on email