javascript - 当 INPUT 为 'required' 时，$scope 属性未定义

Question

在这个包含 2 个 input 字段的基本示例中，我在 blur 上更新模型。这两个字段之间的区别在于一个字段具有 required 属性，而另一个则没有。

我正在观察模型的变化并转储 $scope.user 属性。我注意到，当不需要该字段时，我将值从任何字符串更改回空字符串，并且模型更新为空。但是，必填字段更新为 undefined。

我在文档中没有看到任何会导致这种情况的特殊情况。任何人都可以解释一下吗？

<div ng-app="app" ng-controller="Ctrl">
    <input name="name" ng-model="user.name1" ng-model-options="{updateOn: 'blur'}" />
    <input name="name" ng-model="user.name2" ng-model-options="{updateOn: 'blur'}" required />
</div>
<script>
var app = angular.module("app", []);
app.controller("Ctrl", ["$scope", function ($scope) {
    $scope.user = {
        name1: "",
        name2: ""
    };

    $scope.$watchGroup(["user.name1", "user.name2"], function (value) {
        console.log($scope.user);
    });
}]);
</script>

http://jsfiddle.net/3h8o1yrz/

Answer 1

在 AngularJS 中，如果对输入进行验证，默认情况下 ng-change 不会被触发，除非所有验证都通过。

但是，您可以通过 ng-model-options ( https://docs.angularjs.org/api/ng/directive/ngModelOptions ) 更改此行为。

试试这个:

<input name="name" ng-model="user.name2" ng-model-options="{updateOn: 'blur', allowInvalid: true}" required />