4

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

4

2 回答 2

20

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

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

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

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

如果该值未验证为正确的电子邮件，则内部角度将设置$modelValue为undefined并将 form.fieldName.$error.fieldName 属性设置为 true。所以那个场就变成了invalid。

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

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

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

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

于 2015-02-05T07:12:35.413 回答
5

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

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

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

于 2016-02-16T06:53:25.080 回答