Why is setting a checkbox's false value to 'undefined' causing ng-invalid to get added

2
votes

I have a checkbox in angular that has a false value of undefined and despite it not being required, my form does not validate when it is checked and unchecked, due to ng-invalid being added as a class to the input on uncheck.

Why does this happen?

Here is a plunker you can mess with: http://plnkr.co/edit/mFVcW1pI4wxf5lzRWoZE?p=preview

Notice the second checkbox has a false value of 'undefined'.

<input type="checkbox" ng-model="checkboxModel.value" ng-true-value="'hi'" ng-false-value="undefined" class="ng-pristine ng-untouched ng-valid">

Turns into

<input type="checkbox" ng-model="checkboxModel.value" ng-true-value="'hi'" ng-false-value="undefined" class="ng-dirty ng-invalid ng-invalid-parse ng-touched">

When unchecked, even though neither required nor ng-required are present

1
javascriptangularjscheckbox
Please post relevant code in the question. - PSL
You need to wrap it in single quotes I believe. Like this ng-false-value="'undefined'" " 'all the things here' " - Yeysides
I had an answer up, using ng-model-options="{ allowInvalid: true }"... but it doesn't actually work as I thought it did, so I deleted that answer. Anyway, the problem you're getting is a parse error. Whenever a $parser returns undefined, that's a parse error. So you can either use another value (like null) or figure out why allowInvalid: true doesn't work. - HankScorpio
Added code to question. @Yeysides I want the value to be undefined, not a string that says 'undefined'. - TomSlick
@HankScorpio you can post that as the answer and I'll accept. I can use null instead. - TomSlick

1 Answers

2
votes

Whenever a $parser returns undefined, that's considered a parse error. You could use another value instead (like null).

ngModelOptions.allowInvalid should allow undefined to work... but I tested it and it still has the validation error. *shrug*