I have an Angular 12 application (see source code on Stackblitz) that uses reactive forms and a ControlValueAccessor pattern to create a series of "steps". When I add steps manually (i.e. via the "Add Step" button) and fill in the step details, the parent form (parentForm
) has the values of each added step as expected:
# "Step 0" details entered via web UI
# parentForm.value | json
{ "steps": [ { "name": "Step 0", "action": "action_one" } ] }
However, when I pre-populate the values of a step (as if I would if I were loading step values from an external service) those values show up in the UI but the associated element in parentForm.steps
is null:
# "Step 0" prepopulated, "Step 1" details entered via web UI
# parentForm.value | json
{ "steps": [ null, { "name": "Step 1", "action": "action_one" } ] }
How do I get the prepopulated values for "Step 0" into parentForm
?
Turns out all you need to do is pass the value to the
FormControl
constructor in the parent Component. As shown in the (new) Stackblitz: