为什么将 ng-model 设置为 undefined 不会使表单/输入再次有效? [英] Why does setting ng-model to undefined not make the form/input valid again?

问题描述

我有以下简单的表单，其中 type='email' 输入绑定到模型:

<h2>清除ng-model</h2><div ng-controller="EmailCtrl"><表单名称="emailForm" ng-submit="addEmail()"><input type="email" name="email" ng-model="userEmail" placeholder="[e-mail]"><span ng-show="emailForm.email.$invalid && emailForm.email.$dirty">无效的电子邮件</span><span ng-show="emailForm.$invalid">表单无效！</span></表单><br/><button ng-click="clearViaUndefined()">通过未定义清除</button><button ng-click="clearViaNull()">通过空值清除</button><button ng-click="clearViaEmptyString()">通过空字符串清除</button>

假设用户输入了无效的电子邮件，但随后点击了取消"按钮...因此需要重置表单.

在取消"按钮的 ng-click 处理程序中，如果我将模型的值设置为未定义"，这不会将输入元素的 $valid 属性更改回 true(也不是表单的).

function EmailCtrl($scope) {$scope.clearViaUndefined = 函数 () {$scope.userEmail = 未定义；};$scope.clearViaNull = 函数 () {$scope.userEmail = null;};$scope.clearViaEmptyString = function () {$scope.userEmail = "";};}

如果我将模型的值设置为空字符串 "" 或 null，则 $valid 属性会重新设置为 true.

这是为什么?

我在这里有一个 JS Fiddle 来演示行为:

http://jsfiddle.net/U3pVM/12830/

解决方案

每当你在 input 或 select 标签上使用 ng-model 时，angular 会在内部为该字段管理两个值，一个是 $viewValue另一个是 $modelValue

<块引用>

$viewValue ->用于在视图中显示目的

$modelValue->作用域内使用的实际值.

当使用带有 type='email' 的输入标签时，Angular 会不断验证输入值.

如果该值未验证为正确的电子邮件，angular 内部会将 $modelValue 设置为 undefined 并设置 form.fieldName.$error.fieldName 属性为真.因此该字段变为无效.

如果您检查控制器中 form.fieldName.$modelValue 的值，您会发现它是 undefined.

因此在控制器中将模型设置为未定义"，当该字段已经无效时，不做任何更改.

但是如果您将其设置为 null 或 ""，它将用作 $modelValue 和 $viewValue 两者都被更改 - 使该字段再次有效.

希望这已经让您明白了.谢谢.

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="[e-mail]">
            <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.

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 = "";
    };
}

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.

Why is this?

I have a JS Fiddle here demonstrating the behaviour:

http://jsfiddle.net/U3pVM/12830/

解决方案

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 -> Used for display purpose on view

$modelValue-> Actual value which is used inside scope.

When using an input tag with type='email' Angular constantly validates the input value.

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.

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.

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-model 设置为 undefined 不会使表单/输入再次有效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！