2

In Angular 1.2.16 I have this weird issue where my checkbox validation isn't working as expected.

I have tested this on Chrome Version 35.0.1916.114 and Firefox 29.0.1 on Mac OSX 10.8.5

What I expect: When the checkbox is unchecked (and rma.helpdeskFirst is equal to '0') the checkbox is not valid

This works as expected in Angular 1.0.1, but it isn't in 1.2.16.

This is my HTML

<div ng-controller="MyCtrl">
    <form name="rmaForm">
        <input type="checkbox" ng-model="rma.helpdeskFirst" name="helpdeskFirst" ng-required="rma.helpdeskFirst == 0" ng-true-value="1" ng-false-value="0" /> 
        <p><span class="error" ng-show="rmaForm.helpdeskFirst.$error.required">Field is required</span></p>
    </form>
</div>

And the Javascript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

    $scope.rma = {};
    $scope.rma.helpdeskFirst = '0';
}

It is working in Angular 1.0.1 (See Plunker)

In Angular 1.2.16 it isn't working for some reason (See Plunker)

Could it be that this functionality is broken in Angular 1.2.16 or am I tackling this problem not the Angular way?

Thanks in advance.

4
  • What browser do you use? In chrome it works as you expected.
    – dubadub
    Jun 10, 2014 at 9:24
  • I am using Chrome Version 35.0.1916.114 on Mac OSX 10.8.5 Jun 10, 2014 at 9:24
  • 1
    Also when dealing with validation, you should add novalidate attribute to form to disable browser's native form validation (see docs.angularjs.org/guide/forms)
    – dubadub
    Jun 10, 2014 at 9:27
  • It isn't working as expected in my Chrome and Firefox. Are you sure that the 1.2.16 version is working the same as the 1.0.1 version? Thanks for the advice. Jun 10, 2014 at 10:11

1 Answer 1

3

It appears there is a problem in angular 1.2 with using the combination of required/ng-required and ng-true-value.

Here is an existing bug report https://github.com/angular/angular.js/issues/4681 the suggested pull request to fix the issue has not yet been merged and the issue was closed due to inactivity.

Check out this fiddle (http://jsfiddle.net/K8RU8/) that works - by removing the ng-true-value. I think you will have to settle with true being the value when the checkbox is checked.

From what I can tell the data binding breaks when they are both in use. If you add ng-true-value back to the input, the binding no longer works.

1
  • Thanks for your answer, I wasn't aware of that bug in Angular 1.2. I just have to deal with this bug and I will remove the 'ng-true-value for now. Jun 11, 2014 at 6:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.