CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeat
J145
J145

Reputation: 699

Dynamic form creation-AngularJS

ive run into a problem that I was hoping you could help me out with. Basically I am trying to create a dynamic form creation page using AngularJS and bootstrap (just a simple one). I have successfully created the buttons which when clicked create the form, and he input, however when I attempt to type anything into the text inputs im getting an error "Cannot set property 'id1' of undefined". What I basically do is via clicking the buttons I put together a JSON string which I then use angulars ng-repeat to loop through the contents of the created JSON to create the inputs etc on screen. The code can be seen below:

Controller code(functions map to the corresponding button):

$scope.createRow = function(){
            $scope.newForm.sections[0].rows.push({"attribute": "", "properties":[]});
        };

$scope.createInput = function(){
            $scope.newForm.sections[0].rows[0].properties.push({"id":"id1", "input": "text"});
        }

html code:

               <section  id="test" ng-repeat="property in row.properties">

                    <div class="{{property.inputDivCss || 'col-md-8'}}">
                        <input
                                class="{{property.inputClass}}"
                                type="{{property.type}}"
                                placeholder="{{property.placeholder}}"
                                ng-model="enrollmentForm.properties[property.id]"
                                ng-required="property.required"
                                name="{{property.id}}"
                                value="{{property.value}}"
                                ng-pattern="{{property.pattern}}"
                                />
                    </div>

                </section>

As I say, When I click the corresponding button which calls createInput the text box is displayed and everything looks fine. It only when I attempt to type in the text box that I get an error "Cannot set property 'id1' of undefined". Im probably doing something silly or just forgetting to initialise something but for the life of me I cant seem to figure it out.

Thanks for any help I may get.

Upvotes: 0

Views: 731

Answers (1)

harishr
harishr

Reputation: 18065

have a look at this: angular-dynamic-form and also angular-formly

to solve your problem, initialize properties

enrollmentForm.properties = {};

Upvotes: 1

Related Questions