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>

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

在“取消”按钮的ng-click处理程序中，如果我将模型的值设置为“undefined”，则不会将input元素的$ 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 - ＆gt;用于视图上的显示目的

$ modelValue-＆GT;在范围内使用的实际值。

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

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

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

因此，将模型设置为“未定义”＆＃39;在控制器中，当该字段已经无效时，不进行任何更改。

但是，如果您将其设置为null或""，那么它将以$modelValue和$viewValue的形式发生变化 - 使该字段再次生效。

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

Answer 2

在输入字段

上添加ng-model-options =“{allowInvalid：true}”

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

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

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

2 个答案: