I have the following simple form: an input of type type = 'email', bound to a model:
<div ng-app>
<h2>Clearing ng-model</h2>
<div ng-controller="EmailCtrl">
<form name="emailForm" ng-submit="addEmail()">
<input type="email" name="email" ng-model="userEmail" placeholder="email@domain.com">
<span ng-show="emailForm.email.$invalid && emailForm.email.$dirty">invalid email</span>
<span ng-show="emailForm.$invalid">form invalid!</span>
</form>
<br/>
<button ng-click="clearViaUndefined()">clear via undefined</button>
<button ng-click="clearViaNull()">clear via null</button>
<button ng-click="clearViaEmptyString()">clear via empty string</button>
</div>
</div>
Suppose the user enters an invalid email address and then clicks the "Cancel" button ... so the form should be reset.
In the ng-click handler for the Cancel button, if I set the model value to "undefined", this does not change the input element property $ valid property back to true (or form for that matter).
function EmailCtrl($scope) {
$scope.clearViaUndefined = function () {
$scope.userEmail = undefined;
};
$scope.clearViaNull = function () {
$scope.userEmail = null;
};
$scope.clearViaEmptyString = function () {
$scope.userEmail = "";
};
}
If I set the model value to the empty string "" or null, then the $ valid property will return true.
Why is this?
I have a JS script demonstrating the behavior:
http://jsfiddle.net/U3pVM/12830/