AngularJS: Input "required" attribute deletes its ng-model entirely when the control is empty

Question

I've noticed something odd in AngularJS 1.7.9.

If I use the code <input type="text" ng-model="object.property">, and empty the control (i.e., set its value to an empty string), then object.property also gets set to an empty string – which is what I want and expect.

However, if I add the required attribute to the <input>, and empty the control, then property gets removed from object entirely!

Is this intended behavior? If so, is there a workaround?

The DEMO

angular.module("app",[])
.controller('requiredTestController', ['$scope', function ($scope) {
    
    $scope.user = {
        name: 'delete this text'
    };
    
    $scope.userWithRequiredName = {
        name: 'delete this text'
    };
    
}]);

<script src="//unpkg.com/angular/angular.js"></script>

<body ng-app="app" ng-controller="requiredTestController">

    <p>user: {{ user }}</p>
    <input type="text" ng-model="user.name">
    
    <hr>
    
    <p>userWithRequiredName: {{ userWithRequiredName }}</p>
    <input type="text" ng-model="userWithRequiredName.name" required>

</body>

It seems that this is intended behavior: "The default behaviour in ngModel is that the model value is set to undefined when the validation determines that the value is invalid." docs.angularjs.org/api/ng/directive/ngModelOptions That seems very weird to me – I'd expect it to set the property to null instead. — greenie2600
– greenie2600, Commented Mar 4, 2020 at 18:13

Petr Averyanov · Accepted Answer · 2020-03-04 14:17:20Z

1

By default invalid values are not stored into model (null is saved instead), and empty string is not valid in your case, to change this add:

ng-model-options="{allowInvalid: true}

answered Mar 4, 2020 at 14:17

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

greenie2600 Over a year ago

It's not saving null into the model, though. It's removing the property entirely.

Community · Accepted Answer · 2020-06-20 09:12:55Z

Use ng-model-options="{allowInvalid: true}":

For more information, see

AngularJS ng-model-options Directive API Reference — Model updates and validation

The DEMO

angular.module("app",[])
.controller('requiredTestController', ['$scope', function ($scope) {
    
    $scope.user = {
        name: 'delete this text'
    };
    
    $scope.userWithRequiredName = {
        name: 'delete this text'
    };
    
}]);

<script src="//unpkg.com/angular/angular.js"></script>

<body ng-app="app" ng-controller="requiredTestController">

    <p>user: {{ user }}</p>
    <input type="text" ng-model="user.name">
    
    <hr>
    
    <p>userWithRequiredName: {{ userWithRequiredName }}</p>
    <input type="text" ng-model="userWithRequiredName.name"
           ng-model-options="{allowInvalid: true}" required>

</body>

Collectives™ on Stack Overflow

AngularJS: Input "required" attribute deletes its ng-model entirely when the control is empty

The DEMO

2 Answers 2

1 Comment

The DEMO

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The DEMO

2 Answers 2

1 Comment

The DEMO

Comments

Your Answer

Sign up or log in

Post as a guest

Related