Error when creating the check list control

[Cesar Vega]

First I want to say Thank you!. I like your module, and I'm planning to use it to build a GUI so people can create forms dynamically whit out using any code.

I got and error when creating the check list control, I follow the debugger until it start adding the option but the I get an error but when I remove this code below from the Json model From the checklist the error goes away.

 "isOn": "on",
 "isOff": "off"

Here is the DataTEmplate Im Using

* $scope.stdFormTemplate = { "fieldset": { "type": "fieldset", "label": "Personal Info", "fields": { "FirstNameText": { "type": "text", "model": "firstName", "placeholder": "First Name" }, "LastName Text": { "type":"text", "model": "lasName", "placeholder":"Las Name" }, "checkList": {
"type": "checklist", "model": "checklist", "label": "checklist", "options": { "first": { "label": "first option" }, "second": { "label": "second option", "isOn": "on", "isOff": "off" } } } } } };

Error From FireBug

Error: [ngModel:constexpr] http://errors.angularjs.org/1.3.2/ngModel/constexpr?p0=ngTrueValue&p1=on v/<@http://localhost:55405/Scripts/angular.min.js:6:416 rd@http://localhost:55405/Scripts/angular.min.js:156:363 Ad.checkbox@http://localhost:55405/Scripts/angular.min.js:209:414 wc</<.link.pre@http://localhost:55405/Scripts/angular.min.js:210:414 $@http://localhost:55405/Scripts/angular.min.js:70:46 I@http://localhost:55405/Scripts/angular.min.js:59:62 g@http://localhost:55405/Scripts/angular.min.js:51:299 g@http://localhost:55405/Scripts/angular.min.js:51:316 g@http://localhost:55405/Scripts/angular.min.js:51:316 g@http://localhost:55405/Scripts/angular.min.js:51:316 g@http://localhost:55405/Scripts/angular.min.js:51:316 I@http://localhost:55405/Scripts/angular.min.js:59:195 g@http://localhost:55405/Scripts/angular.min.js:51:299 C/<@http://localhost:55405/Scripts/angular.min.js:50:414 .link/<@http://localhost:55405/Scripts/Assets/dynamic-forms.js:372:13 f/<@http://localhost:55405/Scripts/angular.min.js:110:390 Me/this.$get</k.prototype.$eval@http://localhost:55405/Scripts/angular.min.js:124:246 Me/this.$get</k.prototype.$digest@http://localhost:55405/Scripts/angular.min.js:121:324 Me/this.$get</k.prototype.$apply@http://localhost:55405/Scripts/angular.min.js:125:10 n@http://localhost:55405/Scripts/angular.min.js:80:372 O@http://localhost:55405/Scripts/angular.min.js:84:445 uf/</B.onload@http://localhost:55405/Scripts/angular.min.js:85:462

<input class="ng-pristine ng-untouched ng-valid" ng-false-value="off" ng-true-value="on" ng-model="personalInfoTemplateData['checklist']['second']" name="checklist['second']" type="checkbox">

[Hennik Hunsaker]

Did you check the error page linked in the first line of the error message? It explains that with Angular 1.3.x, the convention of the ng-false-value and ng-true-value attributes (generated from isOff and isOn, respectively) has changed, requiring changes to your templates if you're moving to 1.3.x. This module was built using 1.0.8, and has been tested through 1.2.x, but 1.3.x is just out of beta, so the demo hasn't been updated for it. I really can't adapt the code to compensate for a change like this (even if there is a way to retrieve the current Angular version number, version-based logic is a hack, not a fix), and besides, the values placed into the form's HTML are pulled from the JSON template directly, unmodified, so the fix is to simply update your templates for 1.3.x. I'll do this for the demo eventually, but as a lot of existing projects are still using 1.2.x and prior, that isn't a high priority.

[Cesar Vega]

Thanks Daniel I rolled back to previous versions but I get some other issues, even in your demo I get a weird behavior when I use the radio and the check boxes, (when click it the check mark or the dot in the radio buttons),it just jumps from the clicked one to the other option. probably is my setting I'm not sure or Firefox browser etc. Just some more questions to clarify, I still new to angular features and I want to learn the angular way of doing things.

A) I notice that the DOM elements don't have an ID or a way to add a class (so I could add attributes styles etc..), so I can style it; could you please let me know if you know how I may apply bootstrap classes to the dynamics forms elements? (Now I'm implementing my own css per HTML template to make it look like bootstrap.) .

B) I want to per-populate the form inputs from an $http request, I still trying to figure how is the best way to do this, and apply it to the value of the controls that by the way I don't see a way to add predefine value inside the text boxes for example.

I try setting the val "FirstNameText": { "type": "text", "model": "firstName", "placeholder": "First Name", "val":"Jhonattan" },

But I don't see that option in the set: Please let me know if is possible or I have to come out with my own solution.

maxLength: see ng-maxlength
minLength: see ng-minlength
placeholder: a value to display in a text-like control when it is empty
splitBy: see ng-list (this option is only supported by text and textarea controls)
validate: see ng-pattern

Thanks again for you answers I will try to make it work with the angualr ver 1.3.2

[Cesar Vega]

Hi Daniel ABOUT THIS

(I rolled back to previous versions but I get some other issues, even in your demo I get a weird behavior when I use the radio and the check boxes, (when click it the check mark or the dot in the radio buttons),it just jumps from the clicked one to the other option. probably is my setting I'm not sure or Firefox browser etc.)

I actually fixed this problem removing the LABEL option in the JSON model on the radio with many options and the check list control and all looks like is working with the angular ver. 1.3.2

Please let me know about my questions .

A) I notice that the DOM elements don't have an ID or a way to add a class (so I could add attributes styles etc..), so I can style it; could you please let me know if you know how I may apply bootstrap classes to the dynamics forms elements? (Now I'm implementing my own css per HTML template to make it look like bootstrap.) .

B) I want to per-populate the form inputs from an $http request, I still trying to figure how is the best way to do this, and apply it to the value of the controls that by the way I don't see a way to add predefine value inside the text boxes for example.

I try setting the val "FirstNameText": { "type": "text", "model": "firstName", "placeholder": "First Name", "val":"Jhonattan" },

But I don't see that option in the set: Please let me know if is possible or I have to come out with my own solution.

[Hennik Hunsaker]

I probably need to improve the logic for checklist and radio labels, so they don't wrap the control collection. Some browsers get confused about which label tag to honor sometimes. I'll eventually add support for HTML templates to use for each control so developers have more control over things like that, so that's probably something I'll fix then, but as you pointed out, simply leaving out the label on the collection tends to fix that issue in the meantime.

[Hennik Hunsaker]

The generated controls don't have an id because Angular doesn't use them to drive data. In fact, even the browser itself doesn't use the id to interact with the form control, outside of JavaScript libraries that really have nothing to do with the browser itself anyway. Instead, the browser will use the name attribute, while Angular uses its own ng-model attribute, to determine how the form input should be passed to other parts of the app (the server, in the browser's case; a JS variable in Angular's).

That said, you can add one using the attributes key in your template, if your code relies on ids. You can do the same with adding classes, too. There is a class key available on control templates, but it's intended for dynamically-updated classes driven by Angular's ng-class attribute, so static classes are best applied under attributes.class instead.

[Hennik Hunsaker]

As to pre-setting the value, the latest master points out in the README (I forgot to mention it in earlier versions) that Angular requires your form model to be initialized to an object. It need not be an empty object, if you want to set values in your controller, but the empty object tends to be best, since the idea behind this module is that you don't know what the form will look like in advance. If this variable is not initialized, JavaScript will throw a fit and refuse to cooperate with anything.

[Cesar Vega]

Thanks a lot Daniel. I will work whit it as its and try to understand how is build to make it .

Thank you again.

[Hennik Hunsaker]

Any time!