I'm facing an issue with a checkbox in my Angular project. The checkbox has a false value of undefined, and even though it's not marked as required, the form doesn't validate when I check and uncheck it. This is because the class ng-invalid gets added to the input when unchecked.
Why is this happening?
If you want to take a look at the problem, here's a Plunker link: http://plnkr.co/edit/mFVcW1pI4wxf5lzRWoZE?p=preview
Pay attention to the second checkbox that 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">
After interaction, it changes to:
<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">
This happens when the checkbox is unchecked, even though neither required nor ng-required are specified.