AngularJS checkbox model value is undefined

Viewed 18314

I have a problem where I'm attempting to post the value of a checkbox in my model to the server and as the checkbox has not been interacted with on the form, angular seems to have not assigned it a value, when I ask for the value of the checkbox it comes back as undefined.

Here is my markup:

<div class="form-group">
    <input id="templateDisable" type="checkbox" ng-model="template.disabled" />
    <label for="templateDisable">Disabled</label>
</div>

And here's a reduced version of my save action on my controller:

$scope.save = function (form) {
    if (form.$valid) {
        var formData = new FormData();
        // this is the problem line of code
        formData.append("disabled", $scope.template.disabled);
        // ... some other stuff
    }
};

Actually, ticking then unticking the checkbox before I hit the save action results in the template.disabled property being false, which is what I would have expected without any manual intervention.

I've seen other related questions, e.g. AngularJS: Initial checkbox value not in model but surely stuff like a simple checkbox should be baked in? I shouldn't have to be writing directives to manage checkboxes surely?

2 Answers
Related