Checklist

[tonyhayes]

Hi -- I'm trying to populate my check list from stored json data
region: {1:true}

But it isn't being checked in the form;

    var dynamicForm =  {
        "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"
                }
            }
        }
    };

Any thoughts ?
I have other components and they are populating correctly.

tony@drillmap.com

[danhunsaker]

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...

[tonyhayes]

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"
                    }
                }
            }
        };

    })

[tonyhayes]

fyi -- I just tried it exactly like you suggested

"region": {"1": true}

and no joy.

[danhunsaker]

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...

[danhunsaker]

That should fix it. Care to give it a try?

[tonyhayes]

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)

[tonyhayes]

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.

[danhunsaker]

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).

[tonyhayes]

nicely working.

thanks for your help.

[tonyhayes]

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

[tonyhayes]

I might be wrong — In a subsequent test, I’m not observing this — must be something with one of my objects.

[danhunsaker]

Since it sounds like this error didn't reappear, I'll close this issue. Feel free to reopen it if needed.