AngularJS checkbox model value is undefined

Question

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?

Stewie · Accepted Answer · 2013-12-23 12:05:36Z

10

This is per design. If you want a default value on your model than you should initialise it inside the controller (recommended), or make use of ng-init.

app.controller('AppController',
    [
      '$scope',
      function($scope) {
        $scope.template = {
          disabled = false
        };
      }
    ]
  );

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

answered Dec 23, 2013 at 12:05

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

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

3 Comments

A. Murray Over a year ago

What is the benefit of leaving the model properties undefined?

Stewie Over a year ago

I'd say there are several. a) Model is not changed implicitly, by simply attaching it to a control. That would be bad design, IMHO. b) Consistency is preserved, because if checkbox was made to set the model to false by default, then I guess the text input would also have to set the initial value to empty string '', to keep things consistent. But that would be bad design too.

Robin-Hoodie Over a year ago

Like @NeilAtkinson pointed out below, this will always set the value to false even if was true in the first place.

Ajay Barot · Accepted Answer · 2017-03-03 08:31:25Z

6

The following will always set the state back to "unchecked" when the page is loaded (or refreshed). In other words it will overwrite the user's actual selection whenever the page is refreshed.

<input type="checkbox" ng-model="template.disabled" 
 ng-init="template.disabled=false" />

If, however, you want the checkbox state set to a default state initially and you also want it to remember user interactions, then the following is what you want.

<input type="checkbox" ng-model="template.disabled" 
 ng-init="template.disabled = template.disabled || false" />

edited Mar 3, 2017 at 8:31

Ajay Barot

1,6801 gold badge22 silver badges38 bronze badges

answered Sep 30, 2014 at 11:40

Neil Atkinson

7746 silver badges10 bronze badges

Collectives™ on Stack Overflow

AngularJS checkbox model value is undefined

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related