$ Scope property undefined when INPUT is "required"

Question

In this basic example of fields 2, inputI update the model to blur. The difference between the two fields: one has an attribute requiredand the other does not.

I am observing a model change and resetting property $scope.user. I noticed that when a field is NOT required, I change the value from any row back to an empty row, and the model is updated as empty. However, the required field is updated as undefined.

I do not see anything special in the documents that could cause this. Can anyone shed some light?

<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 />