为什么将ng-model设置为undefined会使表单/输入不再有效？

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="[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>

假设用户输入了无效的电子邮件，然后单击“取消”按钮…因此需要重置表单。

在“取消”按钮的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/

Answer 1

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

$ viewValue->用于在视图上显示

$ modelValue->在范围内使用的实际值。

与type='email'Angular 一起使用输入标签时，将不断验证输入值。

并且，如果该值未验证为正确的电子邮件，则angular内部将设置$modelValue为undefined，并将form.fieldName。$
error.fieldName属性设置为true。这样那个领域就变成了invalid。

如果在控制器中检查form.fieldName。$ modelValue的值，则将发现它为undefined。

因此，当字段已经无效时，在控制器中将模型设置为“未定义”，则不会发生任何变化。

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

希望这能清除您的理解。谢谢。