Dynamic Form and AngularJs

Question

We have a dynamic Form being rendered based on database configurations. I am using code as mentioned in the below fiddle

But am not able to get the value of the checkbox element selected. Please guide me through this. I am using checklist-model for Checkbox Elements.

 <label ng-repeat="cCheck in form.color">
  <input type="checkbox" checklist-model="outputs[form.databaseAttr]" checklist-    value="cCheck" ng-init="outputs[form.databaseAttr] = form.defaultValue"> {{cCheck}} <br>
</label>

Fiddle Link

Please let me know if we have anybetter way of handling Dynamic Forms. Something like jQuery Serialize where we pass the formId and get all elements from the form.

please post the relevant code in question not in external link. JSfiddle is great for demos but isn't a substiute for the actual problem code — charlietfl
– charlietfl, Commented Aug 11, 2014 at 21:02
@charlietfl That is the fiddle I have created, trying to mention the way I am trying to use angular with dynamic forms. It works well except with Checkboxes. Please guide me through this — Hero
– Hero, Commented Aug 11, 2014 at 21:06
what part of posting your code in question did you not understand? — charlietfl
– charlietfl, Commented Aug 11, 2014 at 21:06
@charlietfl I have updated the JSFiddle jsfiddle.net/surajnaik821986/fg3967yo if you select multiple values and click save the Checkbox values are not being captured correctly as in the fiddle — Hero
– Hero, Commented Aug 11, 2014 at 21:33
I'm not quite sure what your trying to accomplish (and isn't working) but maybe this will help you out abit. We use it to create and render dynamic forms. It contains a checkboxfield template from which you might wanna borrow some code. — null
– null, Commented Aug 11, 2014 at 21:53

lvarayut · Accepted Answer · 2014-08-11 22:26:49Z

1

There is a checklist-directive developed to solve the checkbox problem. You can download check-list.js and add it as the module dependency as following:

var exampleApp = angular.module('example', ["checklist-model"]);

So, in your html, you should use checklist-model and checklist-value instead of ng-model and ng-value respectively:

<div ng-switch-when="checkbox">
    <br>{{form.text}} <br>
    <label ng-repeat="cCheck in form.color">
      <input type="checkbox" checklist-model="outputs[form.databaseAttr]" checklist-value="cCheck" ng-init="outputs[form.databaseAttr] = form.defaultValue"> {{cCheck}} <br>
  </label>
</div>

Try it yourself.

EDIT: In order to set default values of the checkbox, you can put the values that you want into the outputs[from.databaseAttr] array. In your case, defaultValue:

{
    text: 'select mutiple colors',
    databaseAttr: 'checkbox',
    type: 'checkbox',
    color: ['red', 'blue', 'black'], 
    defaultValue: ['blue'] // <-- blue is set as default
}

JsFiddle.

edited Aug 11, 2014 at 22:26

answered Aug 11, 2014 at 22:03

lvarayut

15.5k17 gold badges65 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hero Over a year ago

Thanks I was using checklist-model as mentioned in the question. Forgot to add the module dependency :(. Anyways how do we default select the checkbox in the above fiddle ??

Collectives™ on Stack Overflow

Dynamic Form and AngularJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related