Comments (12)
The only thing I can think of offhand is that the keys need to be the same data type - that is, they need to both be strings. But I'd assume you know that already, and that your stored JSON data from which you're restoring values is actually encoded as "region": {"1": true}
- which would mean that isn't the problem. Unfortunately, in order to be more help, I'd probably need to see more of your code...
from angular-dynamic-forms.
this might be a little boring for you .. but here goes ... (also I've gone back and forth on the quotation marks -- it makes no difference - and it works on the other form types.
this is part of a data structure with test data
{
id:2,
customer: "ba1d6149-1545-411f-9e45-20dc82f1a438",
salesPerson: 15,
contact: 1,
opportunityForm: {
location: 15,
revenueSchedule: 1,
status: 1,
typeConversation: 1,
dealDate: "2014-03-13",
region: {"1":true}
},
in the view I have the following snippet;
<fieldset>
<dynamic-form class="col-md-12" template="opportunityFormTemplate" ng-model="master.opportunityForm">
<legend>dynamic form test</legend>
</dynamic-form>
</fieldset>
In my controller I have;
/*
Dynamic form processing
*/
$scope.opportunityFormTemplate = dynamicFormService.getDynamicForm();
You have seen my service, but I'll reprint (Every is working correctly except for the checklist)
.service('dynamicFormService', function () {
this.getDynamicForm = function () {
return dynamicForm;
};
var dynamicForm = {
"dealDate": {
"type": "date",
"label": "Deal Date",
"placeholder": "date"
},
"status": {
"type": "select",
"label": "Status",
"empty": "nothing selected",
"options": {
"1": {
"label": "won"
},
"2": {
"label": "loss"
},
"3": {
"label": "pending"
}
}
},
"location": {
"type": "select",
"label": "Location",
"empty": "nothing selected",
"options": {
"15": {
"label": "London"
},
"2": {
"label": "Houston"
},
"3": {
"label": "Austin"
}
}
},
"typeConversation": {
"type": "select",
"label": "Type of Conversation",
"empty": "nothing selected",
"options": {
"1": {
"label": "New Business"
},
"2": {
"label": "Proposal"
},
"3": {
"label": "Continuing Business"
},
"4": {
"label": "Follow-up"
},
"5": {
"label": "Meeting"
}
}
},
"revenueSchedule": {
"type": "select",
"label": "Revenue Schedule",
"empty": "nothing selected",
"options": {
"1": {
"label": "daily"
},
"2": {
"label": "weekly"
},
"3": {
"label": "monthly"
},
"4": {
"label": "yearly"
}
}
},
"region": {
"type": "checklist",
"label": "Region",
"options": {
"1": {
"label": "North East"
},
"2": {
"label": "All"
},
"3": {
"label": "South Texas"
},
"4": {
"label": "Permian"
},
"5": {
"label": "Mid Continent"
},
"15": {
"label": "West"
}
}
}
};
})
from angular-dynamic-forms.
fyi -- I just tried it exactly like you suggested
"region": {"1": true}
and no joy.
from angular-dynamic-forms.
I was thinking of strict JSON, which requires object property names to be capitalized... The notation used within JavaScript is considerably more forgiving.
I think I found the issue, though... Stupidly, I'm setting the model value to {}
without checking whether it is already set first. This happens on line 137. I'll fix this real quick and push a new version. Might be a few minutes because I want to make sure I get all of these little mistakes...
from angular-dynamic-forms.
That should fix it. Care to give it a try?
from angular-dynamic-forms.
Sxsw baby (I’m in austin.tx)— I’ll try in the morning if you don’t mind — thanks for your help — really nice work … (I’ll let you know)
from angular-dynamic-forms.
not that I’m pushing (I’m not — I’m very happy with what you have achieved) … as an alternative I tried the select with the muiltiple option — it either has the same problem or I couldn’t figure out how to configure the object.
from angular-dynamic-forms.
The way Angular handles model values for various form elements isn't necessarily intuitive. For a select
with multiple
, the model needs to contain an array of option
keys: region: ["1"]
in your example. Otherwise, the form template simply needs checklist
changed to select
, and multiple: true
added, and everything should work. Just tested this using your code with the modifications mentioned above, in fact.
While the way Angular sets up models for form elements is outside my control, and therefore the scope of this module's documentation, I really should document how my code sets up models for the handful of "elements" I made up (checklist
being one).
from angular-dynamic-forms.
nicely working.
thanks for your help.
from angular-dynamic-forms.
just so you are aware, I think there may be a bug on the line you revised.
If I pass in a {} model - I get a type error:
TypeError: Cannot read property 'region' of undefined
at http://localhost:8888/app/lib/dynamic-forms.js:137:52
at Object.forEach (http://localhost:8888/app/lib/angular/angular.js:329:20)
at http://localhost:8888/app/lib/dynamic-forms.js:74:21
at deferred.promise.then.wrappedCallback (http://localhost:8888/app/lib/angular/angular.js:11046:81)
at deferred.promise.then.wrappedCallback (http://localhost:8888/app/lib/angular/angular.js:11046:81)
at http://localhost:8888/app/lib/angular/angular.js:11132:26
at Scope.$get.Scope.$eval (http://localhost:8888/app/lib/angular/angular.js:12075:28)
at Scope.$get.Scope.$digest (http://localhost:8888/app/lib/angular/angular.js:11903:31)
at Scope.$get.Scope.$apply (http://localhost:8888/app/lib/angular/angular.js:12179:24)
at don
from angular-dynamic-forms.
I might be wrong — In a subsequent test, I’m not observing this — must be something with one of my objects.
from angular-dynamic-forms.
Since it sounds like this error didn't reappear, I'll close this issue. Feel free to reopen it if needed.
from angular-dynamic-forms.
Related Issues (20)
- Usage of file input unclear HOT 2
- Unknown provider: dynformProvider <- dynform <- LoginCtrl HOT 2
- test
- checklist is not rendering showing error at option portion HOT 1
- File Upload Issue...Last 1 for this project I hope HOT 2
- Multi Column Form HOT 3
- Auto complete HOT 3
- how to add required in checklist HOT 3
- Regarding dynamically loading the template from a response from $http service - question/issue HOT 12
- HTML-first (Accessible) Usage? HOT 1
- Adding entries into custom class HOT 1
- How to use ng-show?
- Does this actually work? HOT 3
- How to add custom components like autosuggest, uib-datepicker in dynamic form
- How to add custom validations in dynamic form
- How to use the value of the ng-model in dynamic-forms.js file
- Refresh directive upon attrs.template (stdFormTemplate) change HOT 1
- Using ADF with Jhispter HOT 3
- Want to run it after clone HOT 4
- HTTP POST HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-dynamic-forms.