Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

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.

share|improve this question
    
How/where do you define enrollmentForm? – Vadim Jul 13 '14 at 11:50
    
When you get input, F12 your browser - get you input html - paste it here. then we might help you out. – micronyks Jul 13 '14 at 11:55
    
i think it's because your ng-model isn't initialize yet, you have to initialize it before, try ng-init in template or make a new scope in function – ThomasP1988 Jul 13 '14 at 12:00
    
Ahh guys, Thats brilliant, thank you, I knew it was something silly. It was down to the fact that I hadn't defined enrollmentForm hence my ng-model was initialized as you suggested. Thanks for pointing that out. :) – user3781095 Jul 13 '14 at 12:29
up vote 1 down vote accepted

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

to solve your problem, initialize properties

enrollmentForm.properties = {};
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.