Binding valid checkbox to enable button angularjs 1.2.x

Question

I'm trying to use Angularjs's built in form validation, but when I add a required field to a checkbox to make sure its checked I get odd results. If I do the opposite of the value I'd like it seems to work fine. The following fiddle will explain it more thoroughly.

This fiddle works great when you're using Angularjs 1.0.4, but if you switch Angular to 1.2.1 it breaks all over the place. Is there a new way of doing this now? or would this be considered a bug?

EDIT

I simplified the code to make it make more sense, check out this fiddle. The key problem here is that it's doing the opposite of what I would like it to do, but if I switch it the entire thing falls apart. I've also replaced the older code I had here with the newer fiddle. You can still see the older fiddle code in the above link.

Here is the html:

<div ng-controller="myCtrl">
    <ng-form name="myForm">

      <input type="checkbox" ng-model="value.checkbox" name="group-one" ng-true-value="1" ng-false-value="0" ng-required="value.checkbox==1" />
      <input type="submit" value="Send" ng-disabled="myForm.$invalid" />
        {{choice}}
    </ng-form>
</div>

Here is the controller:

function myCtrl($scope) {
    $scope.value = {"checkbox":""};
}

It looks to me like Angular 1.2 is doing just what you're asking it to, and Angular 1.0 is the one with the strange behavior. If your requirement is that only one of the boxes is checked, you should use a radio and not checkbox. — Tim B
– Tim B, Commented Dec 19, 2013 at 21:20
Take another glance... my expected result is that for the form to be valid a checkbox needs to be selected. Clicking on and off 1.0 works great, doing the same on 1.2 has very odd behavior to the point where it completely breaks and quits checking the validity. — Ty Danielson
– Ty Danielson, Commented Dec 19, 2013 at 21:29

Tim B · Accepted Answer · 2013-12-19 22:53:51Z

1

This appears the be a bug, though I'm not sure it's the same as your original problem. The required directive is not functioning properly when an ng-true-value is specified.

Found an existing bug report.

answered Dec 19, 2013 at 22:53

Tim B

2,36815 silver badges21 bronze badges

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

Comments

zs2020 · Accepted Answer · 2013-12-19 21:23:53Z

0

If you use ng-click, you should pass $event in and then get the choice from $event. Or you can use ng-checked to get the value directly.

ng-click="updateQuestionValue($event)"

$scope.updateQuestionValue = function($event){
    var choice = $event.target;
    //...
}

answered Dec 19, 2013 at 21:23

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

1 Comment

Ty Danielson Over a year ago

I updated the jsfiddle to better explain what's happening and how I would like to solve it. Please take a look. The key is using angularjs's valid checks.

Collectives™ on Stack Overflow

Binding valid checkbox to enable button angularjs 1.2.x

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related