angularJS checkbox not updating the model

Question

I have a form with a checkbox and I want to check its value on submit:

html:

       <form class="form-horizontal" role="form" name="AddUserForm" ng-submit="submit(AddUserForm)">
            ...
            <div class="form-group">
                <label for="adduser-email" class="col-xs-2 col-xl-2 control-label">email</label>
                <div class="col-xs-10 col-xl-10">
                    <input type="email" placeholder="email" id="adduser-email" ng-model="AddUserForm.email" required>
                </div>

            </div>
            <div class="col-xs-12 col-xl-12">
                <input id="adduser-mailinglist" type="checkbox" ng-model="AddUserForm.mailinglist">Add to mailing list</input>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10 col-xl-offset-2 col-xl-10">
                    <button class="blue-button" type="submit" class="btn btn-default">Add User</button>
                </div>
            </div>
        </form>

The JS:

    $scope.submit = function(AddUserForm) {
        console.log(AddUserForm.mailinglist);
    };

I'm getting undefined

The text input is fine and exists in the form model

Made a plunkr: http://plnkr.co/edit/NKow0isUCp8PZy90drmA

Would be nice if you could create a Fiddle or so. Does this happen after have interacted with the checkbox? Maybe you need to assign the model an initial value. — kubuntu
– kubuntu, Commented Nov 21, 2014 at 20:06
Does console.log(AddUserForm) display anything in the console? — Blazemonger
– Blazemonger, Commented Nov 21, 2014 at 20:28
Yes. And values of the text elements in the form are correct. Only the checkbox value is missing — Boaz
– Boaz, Commented Nov 21, 2014 at 20:29

Blazemonger · Accepted Answer · 2014-11-21 21:10:56Z

1

You just need to initialize the checkbox's model in your controller:

$scope.mailinglist = false;

plunkr

answered Nov 21, 2014 at 21:10

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

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

2 Comments

Boaz Over a year ago

I agree with you that the plunkr works... My original code doesn't. Can it be related to the face that it's a modalInstance?

Mark Pieszak - Trilon.io Over a year ago

No this is just a very unusual issue with checkbox models in Angular that (I believe) should be fixed. If you click on it and then click again and submit, it'll come in as "false". It seems the $scope doesn't see it, unless it's set (like above) or changed. @Boaz

Benny Lin · Accepted Answer · 2014-11-21 20:50:22Z

0

Updated answer:

Demo: http://jsfiddle.net/0ukwaug4/

Here's the update html, update submit(AddUserForm) to just submit(), the object is already defined in the scope level:

        <form class="form-horizontal" role="form" name="AddUserForm" ng-submit="submit()">
            ...
            <div class="form-group">
                <label for="adduser-email" class="col-xs-2 col-xl-2 control-label">email</label>
                <div class="col-xs-10 col-xl-10">
                    <input type="email" placeholder="email" id="adduser-email" ng-model="AddUserForm.email" required>
                </div>

            </div>
            <div class="col-xs-12 col-xl-12">
                <input id="adduser-mailinglist" type="checkbox" ng-model="AddUserForm.mailinglist">Add to mailing list</input>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10 col-xl-offset-2 col-xl-10">
                    <button class="blue-button" type="submit" class="btn btn-default">Add User</button>
                </div>
            </div>
        </form>

The javascript:

    $scope.submit = function() {
        console.log($scope.AddUserForm.mailinglist);    
    };

You'll get undefined when it is unchecked, but it'll be true when it is checked.

gl

edited Nov 21, 2014 at 20:50

answered Nov 21, 2014 at 20:25

Benny Lin

5363 silver badges8 bronze badges

3 Comments

Boaz Over a year ago

I'm getting undefined even if I check it

Boaz Over a year ago

in my plukr as well, the thing is that in the original code even a checked checkbox gives me undefined... weird...

Owen Over a year ago

In the original code, you are not using dot notation. The creates mailinglist on the view's scope and not the controller. Use dot notation or controller as.

Owen · Accepted Answer · 2014-11-21 21:35:46Z

0

As others have already provided a working plnkr, I will just let you know why your original didn't work. When creating properties without using dot notation, i.e. mailinglist instead of AddUserForm.mailinglist you are creating this property on the view's scope instead of getting the controller's scope. Use dot notation or Controller As to get at the controller's scope.

Check out this video by Egghead.IO for a more thorough explanation: AngularJS - The Dot

answered Nov 21, 2014 at 21:35

Owen

7187 silver badges17 bronze badges

2 Comments

Boaz Over a year ago

That's a good point, Owen. And indeed the original code was AddUserForm.mailinglist. the mailinglist version is for making sure there aren't problems woth the form model

Owen Over a year ago

Ah, I was going off the plnkr in your original post. In that plnkr, you defined $scope.mailinglist in the controller, but only mailinglist on the view. This is what created the child scope version of mailinglist. As far as the dot notation version, if you haven't defined AddUserForm.mailinglist as true or false, it will resolve as undefined until the first model change. This is just the joy of JavaScript. The simple way is to initialize values for AddUserForm to have .mailinglist as false.

Collectives™ on Stack Overflow

angularJS checkbox not updating the model

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related