为什么将 ng-model 设置为 undefined 不会使 form/input 再次有效？

Question

我有以下简单形式，其中 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>

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

在 'Cancel' 按钮的 ng-click 处理程序中，如果我将模型的值设置为 'undefined' 这不会将输入元素的 $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 Fiddle 演示了该行为：

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

Answer 1

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

$viewValue -> Used for display purpose on view

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

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

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

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

因此在控制器中将模型设置为 'undefined'，当字段已经无效时，什么也不会改变。

但是，如果您将其设置为 null 或 ""，它将像 $modelValue 和 $viewValue 一样工作 - 使字段再次有效。

希望这已经清除了您的理解。谢谢。

Answer 2

在输入字段中添加 ng-model-options="{allowInvalid: true}"

然后尝试将 ng-model 设置为 undefined 希望能让 form/input 再次有效

参见：https://docs.angularjs.org/api/ng/directive/ngModelOptions

为什么将 ng-model 设置为 undefined 不会使 form/input 再次有效？

Why does setting ng-model to undefined not make the form/input valid again?

javascript

forms

validation

angularjs

angularjs-ng-model