How would you correctly initialize a FormArray for multiple phone numbers and add a new empty phone control when a user clicks a button in Angular?
hard📝 component behavior Q8 of 15
Angular - Reactive Forms
How would you correctly initialize a FormArray for multiple phone numbers and add a new empty phone control when a user clicks a button in Angular?
AInitialize with <code>new FormArray([null])</code> and use <code>addControl('phone')</code> on button click
BInitialize with <code>new FormArray([])</code> and use <code>push(new FormControl(''))</code> on button click
CInitialize with <code>new FormArray()</code> and assign a new array on button click
DInitialize with <code>new FormGroup()</code> and use <code>push()</code> on button click
Step-by-Step Solution
Solution:
Step 1: Initialize FormArray empty
Start with new FormArray([]) to hold phone controls.
Step 2: Add empty FormControl on button click
Use push(new FormControl('')) to add a blank phone number field.
Step 3: Eliminate incorrect options
Initialize with new FormArray([null]) and use addControl('phone') on button click uses invalid initialization and method; C reassigns array incorrectly; D uses FormGroup instead of FormArray.
Final Answer:
Initialize with new FormArray([]) and use push(new FormControl('')) -> Option B
Quick Check:
Use push() to add empty FormControl [OK]
Quick Trick:Initialize empty FormArray, push new FormControl('') [OK]
Common Mistakes:
MISTAKES
Initializing FormArray with null values
Using addControl() which belongs to FormGroup
Reassigning FormArray instead of pushing controls
Master "Reactive Forms" in Angular
9 interactive learning modes - each teaches the same concept differently
