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.