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

【问题标题】：Why does setting ng-model to undefined not make the form/input valid again?为什么将 ng-model 设置为 undefined 不会使表单/输入再次有效？
【发布时间】：2015-04-04 22:32:29
【问题描述】：

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

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

在“取消”按钮的 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 Fiddle 来演示这种行为：

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

【问题讨论】：

我没有发现问题——所有按钮都为我清除了输入表单...（Chrome）。
只有当您输入无效的电子邮件时才会出现问题 - 因为我正在尝试将表单的 $valid 状态从“false”重置回“true” - 所以如果您输入有效的电子邮件，那么 $valid 值已经是“真”——希望这是有道理的。

标签： javascript angularjs forms validation angularjs-ng-model

【解决方案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 一样工作 - 使该字段再次有效。

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

【讨论】：

当字段为空时如何显示错误消息，如“必填字段”或当字段包含无效电子邮件时显示“无效电子邮件 ID”？
我正在检查控制器中的验证并显示来自控制器的消息。对于无效的电子邮件，我总是收到空白数据，因此每次都显示“必填字段”。我可以使用控制器显示不同的消息吗？
非常感谢。但我有很多表单并在表单字段上使用 ng-repeat 呈现它们。我为每个表单验证使用了validation.js。我没有使用 angularjs 表单验证。我正在使用validation.js 设置$scope.errors.[field.name] = "massage"。我可以通过使用javascript验证来实现吗？
@rajeshpanwar 当然应该有办法做到这一点..为此我需要查看代码..请使用 plunkr/jsfiddle 创建和提问..这里不是解决问题的好地方问题.. :)
@rajeshpanwar 看看这个在 ng-repeat stackoverflow.com/questions/28118134/…987654321@ 中有点相似的渲染形式

【解决方案2】：

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

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

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

【讨论】：