为什么设置NG-模型不确定不再次使表单/输入有效吗？ [英] Why does setting ng-model to undefined not make the form/input valid again?
问题描述
我有以下的简单形式与类型='邮件'输入绑定到一个模型：
I have the following simple form with an type='email' input 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 but then clicks a 'Cancel' button...so the form needs to be reset.
在为取消按钮，NG-click处理程序，如果我设置模式的价值，以未定义这不会改变输入元素的$有效属性回真（也不是形式的为此事）。
In the ng-click handler for the 'Cancel' button, if I set the value of the model to 'undefined' this does not change the input element's $valid property back to true (nor the form's for that matter).
function EmailCtrl($scope) {
$scope.clearViaUndefined = function () {
$scope.userEmail = undefined;
};
$scope.clearViaNull = function () {
$scope.userEmail = null;
};
$scope.clearViaEmptyString = function () {
$scope.userEmail = "";
};
}
如果我的模型的值设置为空字符串或为空，则$有效属性并得到重新设置为true。
If I set the value of the model to an empty string "" or to null, then the $valid property does get set back to true.
这是为什么？
我有一个JS小提琴这里展示的行为：
I have a JS Fiddle here demonstrating the behaviour:
http://jsfiddle.net/U3pVM/12830/
推荐答案
当你在输入或选择标签使用NG-模型，棱角分明的内部管理两个值的字段，一个是 $ viewValue 等为 $ modelValue
Whenever you use ng-model on an input or select tag, angular internally manages two values for the field, one is $viewValue and other is $modelValue
$ viewValue - >用于显示的目的，对视图
$viewValue -> Used for display purpose on view
$ modelValue->这是内部使用范围的实际值。
$modelValue-> Actual value which is used inside scope.
当使用带有输入变量类型=电子邮件角不断验证输入值。
When using an input tag with type='email' Angular constantly validates the input value.
而如果值不验证为正确的电子邮件，棱角分明的内部将设置 $ modelValue 到未定义和将设置form。字段。$ error.fieldName属性为true。使现场变得无效。
And if the value does not validate as a correct email, angular internally will set $modelValue to undefined and will set the form.fieldName.$error.fieldName attribute to true. So that field becomes invalid.
如果您检查控制器内部form。字段。$ modelValue的价值，你会发现它是未定义。
If you check the value of form.fieldName.$modelValue inside the controller you will find it as undefined.
所以设置模型控制器未定义，当现场已经是无效的，改变不了什么。
So setting the model to 'undefined' in the controller, when the field is already invalid, changes nothing.
但如果你把它设置为空或，这将作为 $ modelValue 和 $ viewValue 都得到改变 - 使得现场再次有效
But if you set it to null or "" it will work as $modelValue and $viewValue both get changed - making the field valid again.
希望这清除你的理解。谢谢你。
Hope this has cleared your understanding. Thanks.
这篇关于为什么设置NG-模型不确定不再次使表单/输入有效吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
