我有以下简单形式,其中将type =’email’输入绑定到模型:
<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>
假设用户输入了无效的电子邮件,然后单击“取消”按钮…因此需要重置表单。
在“取消”按钮的ng-click处理程序中,如果我将模型的值设置为“未定义”,则这不会将输入元素的$ valid属性更改回true(就此而言,也不更改表单的属性)。
function EmailCtrl($scope) { $scope.clearViaUndefined = function () { $scope.userEmail = undefined; }; $scope.clearViaNull = function () { $scope.userEmail = null; }; $scope.clearViaEmptyString = function () { $scope.userEmail = ""; }; }
如果我将模型的值设置为空字符串“”或为null,则$ valid属性的确设置为true。
为什么是这样?
我有一个JS小提琴在这里演示行为:
http://jsfiddle.net/U3pVM/12830/
每当在输入或选择标签上使用ng-model时,angular都会在内部管理该字段的两个值,一个为$viewValue,另一个为$modelValue
$viewValue
$modelValue
$ viewValue->用于在视图上显示 $ modelValue->在范围内使用的实际值。
$ viewValue->用于在视图上显示
$ modelValue->在范围内使用的实际值。
与type='email'Angular 一起使用输入标签时,将不断验证输入值。
type='email'
并且,如果该值未验证为正确的电子邮件,则angular内部将设置$modelValue为undefined,并将form.fieldName。$ error.fieldName属性设置为true。这样那个领域就变成了invalid。
undefined
invalid
如果在控制器中检查form.fieldName。$ modelValue的值,则将发现它为undefined。
因此,当字段已经无效时,在控制器中将模型设置为“未定义”,则不会发生任何变化。
但是,如果将其设置为null或"",它将作为$modelValue和起作用,并且$viewValue两者都会更改-使该字段再次有效。
null
""
希望这能清除您的理解。谢谢。