How to set automatically input values as empty (instead of "undefined") when the user remove the value?

Question

In Angular 1.6, when the user removes values inside inputs, these values are set up to "undefined". It seems to be the default behaviour in AngularJS.

HTML

<input ng-model="name" class="form-control" id="inp_name"
       placeholder="My Name" required="true" value="" />

Controller

...
$scope.name = ""; <-- here the initial value is correctly set up as empty
...
$scope.submit = function(){
     alert($scope.name); <-- the value can be "undefined" if the user removed all the string
};

How to automatically set up the value as empty instead of "undefined" each time the text input is empty on the front-end ?

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

1

Use ng-model-options="{allowInvalid: true}" to allow an empty string when the user deletes all the characters in an input box.

For more information, see AngularJS ng-model-options Directive API Reference.

The DEMO

angular.module("app",[])
.controller("ctrl", function($scope) {
    $scope.name = "";
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
    <h1>ng-module-options DEMO</h1>
    <input ng-model="name" class="form-control" id="inp_name"
       placeholder="My Name" required="true" value="" 
       ng-model-options="{allowInvalid: true}"
    />
    <br>
    name= {{name === undefined ? 'undefined': name}}
    <br>
    name= {{name === "" ? 'empty string': name}}
  </body>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 29, 2017 at 15:58

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

Comments

Abd0m1nals · Accepted Answer · 2017-08-29 15:21:13Z

0

You can add this in your submit function:

$scope.name = $scope.name ? $scope.name : "";

answered Aug 29, 2017 at 15:21

Abd0m1nals

2,48615 silver badges27 bronze badges

Comments

Varun Sukheja · Accepted Answer · 2017-08-29 15:28:56Z

0

If there is no value in $scope.name (covers undefined) then setting it to empty string

if(!$scope.name){$scope.name="";}

answered Aug 29, 2017 at 15:28

Varun Sukheja

6,6748 gold badges67 silver badges102 bronze badges

Comments

J.BizMai · Accepted Answer · 2017-08-29 15:54:51Z

0

An alternative but an automatic way (which seems to be the best) is to use a function to check up if the value is empty, null and undefined.

Controller

$scope.isEmpty = function (value) {
   return angular.equals("", value) || angular.equals(undefined, value) || angular.equals(null, value);
};

//Usage 
$scope.submit = function(){
    if($scope.isEmpty($scope.name)) ...
};

answered Aug 29, 2017 at 15:54

J.BizMai

2,8063 gold badges29 silver badges60 bronze badges

Collectives™ on Stack Overflow

How to set automatically input values as empty (instead of "undefined") when the user remove the value?

4 Answers 4

The DEMO

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related