[Solved] Given this Angular code snippet, what will console.log(this.profileForm.value) output?this.profileForm = new FormGroup({ firstName: new FormControl('Alice'), lastName: new FormControl('Smith') });... | Angular

Angular - Reactive Forms

Given this Angular code snippet, what will console.log(this.profileForm.value) output?

this.profileForm = new FormGroup({
  firstName: new FormControl('Alice'),
  lastName: new FormControl('Smith')
});
console.log(this.profileForm.value);

Aundefined

B['Alice', 'Smith']

C{ value: { firstName: 'Alice', lastName: 'Smith' } }

D{ firstName: 'Alice', lastName: 'Smith' }

Step-by-Step Solution

Solution:

Step 1: Understand FormGroup value property
The value property returns an object with keys as control names and values as their current values.
Step 2: Check the given controls and values
Controls are firstName and lastName with values 'Alice' and 'Smith'. So value is { firstName: 'Alice', lastName: 'Smith' }.
Final Answer:
{ firstName: 'Alice', lastName: 'Smith' } -> Option D
Quick Check:
FormGroup.value returns object of control values = D [OK]

Quick Trick: FormGroup.value returns object with control names and values [OK]

Common Mistakes:

MISTAKES

Expecting an array instead of object
Thinking value wraps inside another object
Assuming value is undefined before form submission

Master "Reactive Forms" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Given this Angular code snippet, what will console.log(this.profileForm.value) output?

Step 1: Understand FormGroup value property

Step 2: Check the given controls and values

Final Answer:

Quick Check:

Want More Practice?