I am encountering issues with connecting the inputs of my form to a specific factory that I have injected into the controller responsible for rendering the form. Below is the code snippet for my factory:
App.factory('DeviceSelection',function() {
var states=[{selection:{}},{selection:{}},{selection:{}},{selection:{}}];
return states;
});
Here is an example input from my form:
<div class="controls">
<label class="radio">
<input type="radio" name="user[role]" id="user_role_managing_editor" value="Managing editor" ng-model='states[0].selection.hours'>
Yes
</label>
<label class="radio">
<input type="radio" name="user[role]" id="user_role_area_editor" value="Area editor", ng-model='states[0].selection.hours'>
No
</label>
</div>
When attempting to interact with this radio input, I receive the following error in the JS Console:
TypeError: Cannot read property 'selection' of undefined
Does this imply that I need to initialize the model before the view is rendered? If so, where should this initialization occur?
My objective is to create a multi-step form where all the inputs are linked to the model, with the final step involving sending the results to an API. This concept was previously discussed here:
Store status between forms in AngularJS?