FormGroup for grouping controls in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this FormGroup value?

Given this Angular FormGroup setup, what will be the value of form.value after initialization?

Angular

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

const form = new FormGroup({
  firstName: new FormControl('Alice'),
  lastName: new FormControl('Smith')
});

console.log(form.value);

A {"firstName": "Alice", "lastName": "Smith"}

B {"firstName": "", "lastName": ""}

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

D {}

💡 Hint

Think about what values you set when creating each FormControl.

The FormGroup's value property returns an object with keys matching the control names and their current values. Since each FormControl was initialized with a string, those strings appear in the value.

❓ state_output

intermediate

What happens when a nested FormGroup is updated?

Consider this Angular FormGroup with a nested FormGroup. What will be the output of form.value after updating the nested control?

Angular

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

const form = new FormGroup({
  user: new FormGroup({
    email: new FormControl('[e-mail]'),
    password: new FormControl('1234')
  })
});

form.get('user.email')?.setValue('[e-mail]');
console.log(form.value);

A {"user": {"email": "[e-mail]", "password": "1234"}}

B {"email": "[e-mail]", "password": "1234"}

C {"user": {"email": "[e-mail]", "password": "1234"}}

D {"user.email": "[e-mail]", "user.password": "1234"}

💡 Hint

Remember that nested FormGroups keep their structure in the value object.

Updating a nested FormControl inside a FormGroup updates the nested object in the FormGroup's value. The structure remains nested.

📝 Syntax

advanced

Which option correctly creates a FormGroup with controls initialized to empty strings?

Select the code snippet that correctly creates a FormGroup with two controls, both starting with empty strings.

A new FormGroup([ 'firstName', 'lastName' ])

B new FormGroup({ firstName: '', lastName: '' })

C new FormGroup({ firstName: new FormControl(''), lastName: new FormControl('') })

D new FormGroup(new FormControl(''), new FormControl(''))

💡 Hint

FormGroup expects an object with FormControl instances as values.

FormGroup requires an object where each key is a control name and each value is a FormControl instance. Option C follows this pattern.

🔧 Debug

advanced

Why does this FormGroup code cause a runtime error?

Identify the cause of the runtime error in this Angular FormGroup code snippet.

Angular

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

const form = new FormGroup({
  email: new FormControl('[e-mail]')
});

form.get('password').setValue('12345');

A setValue requires an object, not a string

B FormControl must be initialized with null, not a string

C FormGroup keys must be strings, 'password' is invalid

D form.get('password') returns null, so calling setValue causes an error

💡 Hint

Check if the control you are trying to access exists in the FormGroup.

The FormGroup only has a control named 'email'. Trying to get 'password' returns null. Calling setValue on null causes a runtime error.

🧠 Conceptual

expert

How does FormGroup track the validity of nested controls?

In Angular, how does a FormGroup determine its overall validity when it contains nested FormGroups and FormControls?

A FormGroup validity is determined randomly at runtime

B FormGroup is valid only if all nested controls and nested FormGroups are valid

C FormGroup validity is always true unless explicitly set to false

D FormGroup validity depends only on its own controls, ignoring nested FormGroups

💡 Hint

Think about how validation cascades in nested forms.

A FormGroup is valid only if every control it contains, including those inside nested FormGroups, is valid. If any nested control is invalid, the whole FormGroup is invalid.