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

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

如果我将模型的值设置为空字符串或null，那么$valid属性会被设置回true

为什么会这样

我有一把JS小提琴在这里演示这种行为：

---

无论何时在输入或选择标记上使用ng模型，angular都会在内部管理字段的两个值，一个是$viewValue，另一个是$modelValue

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

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

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

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

如果在控制器中检查form.fieldName.$modelValue的值，您会发现它未定义

因此，当该字段已经无效时，在控制器中将模型设置为“未定义”，不会改变任何内容

但是如果您将其设置为null，或者它将作为$modelValue和$viewValue工作，那么这两个字段都将被更改，从而使该字段再次有效

---

希望这已经澄清了你的理解。谢谢。

在输入字段中添加ng模型选项={allowInvalid:true}

然后尝试将ng model设置为undefined，希望这会使表单/输入再次有效

---

请参阅：

我没有发现问题-所有按钮都为我清除输入表单。。。Chrome。只有当您输入无效电子邮件时才会出现问题-因为我正在尝试将表单的$valid状态从“false”重置为“true”-因此如果您输入有效电子邮件，那么$valid值已经是“true”-希望这是有意义的。当字段为空时，如何显示错误消息，如必填字段，或当字段具有无效电子邮件时，如何显示无效电子邮件id？我正在检查控制器中的验证，并显示来自控制器的消息。对于无效电子邮件，我总是得到空白数据，所以每次都显示必填字段。我可以用控制器显示不同的信息吗？非常感谢。但我有很多表单，并使用ng repeat对表单字段进行渲染。我对每个表单验证都使用validation.js。我没有使用angularjs表单验证。我正在使用validation.js设置$scope.errors.[field.name]=按摩。我可以通过使用javascript验证来实现吗。@rajeshpanwar肯定有办法做到这一点。为此，我需要查看代码。请使用plunkr/jsfiddle创建并提问。。这里不是解决问题的好地方@rajeshpanwar看一看ng repeat内部类似的渲染形式

function EmailCtrl($scope) {

    $scope.clearViaUndefined = function () {
        $scope.userEmail = undefined;
    };

    $scope.clearViaNull = function () {
        $scope.userEmail = null;
    };

    $scope.clearViaEmptyString = function () {
        $scope.userEmail = "";
    };
}