Remove key-value if input is null in angularJS

Question

I have a form with all inputs decleared as models like "ng-model = 'input.text' ". Everything works fine but what I need is whenever the value is now null the key-value pair should be gone as well like {} not { 'text':"" }. This can be achieved if the model is required but I was wondering if this is achievable without using required.

The code is:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  </head>

  <body ng-controller="myCtrl">
    <input type="text" ng-model="input.text">
    <input type="number" ng-model="input.number">
    <p>{{ input }}</p>
    <script type="text/javascript">
      app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope, $timeout){
        $scope.input = {};
      });
    </script>
  </body>
</html>

The plunker is: http://plnkr.co/edit/u483ay8OZCIo9E32ssVU?p=preview

PS

The JSON value of input will be passed to the server as a JSON object through HTTP

try this if(input.name == "") delete input["name"];

Hadi
– Hadi

2016-05-26 07:06:32 +00:00
Commented May 26, 2016 at 7:06 — Hadi
– Hadi, Commented May 26, 2016 at 7:06
Where will I put the conditional?

Dean Christian Armada
– Dean Christian Armada

2016-05-26 07:10:47 +00:00
Commented May 26, 2016 at 7:10 — Dean Christian Armada
– Dean Christian Armada, Commented May 26, 2016 at 7:10

Krupesh Kotecha · Accepted Answer · 2016-05-26 07:26:56Z

2

Try this. I have applied watch on scope variable which will get notify whenever scope value change. put condition inside it and delete key according to value

app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.input = {};
  $scope.$watch("input.text", function() {
    if ($scope.input.text == "") {
      delete $scope.input["text"];
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="input.text">
  <input type="number" ng-model="input.number">
  <p>{{input}}</p>
</div>

edited May 26, 2016 at 7:26

answered May 26, 2016 at 7:07

Krupesh Kotecha

2,4123 gold badges23 silver badges40 bronze badges

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

3 Comments

Dean Christian Armada Over a year ago

You kinda just cheated via HTML. You even changed scope variable but thanks for trying

Lokesh Over a year ago

Using watchers instead of simple directives (ng-change in this case) is highly discouraged. Read this article to know why. codelord.net/2015/06/11/…

Krupesh Kotecha Over a year ago

Thanks for your advice. will take care of it. @Lokesh

Yassine Badache · Accepted Answer · 2016-05-26 07:23:54Z

1

You may use ngChange to check if your input is null whenever you make a change to your input. In your html, something like:

<input type="text" ng-model="input.text" ng-change="validate()" />

And in your AngularJS controller:

function validate() {
   if ($scope.input.text === null) {
     delete $scope.input[text]; // First option
     delete $scope.input.text;  // Second option
   }
}

You can apply this to any field, too.

answered May 26, 2016 at 7:23

Yassine Badache

1,8591 gold badge21 silver badges41 bronze badges

2 Comments

Dean Christian Armada Over a year ago

I think this is the most re-usable method

Yassine Badache Over a year ago

Glad to be helpful :)

Lokesh · Accepted Answer · 2016-05-26 07:17:09Z

1

There are two ways to achieve this:

1. Use ng-change in the input tag, which will check if text is empty, delete it.

In your controller, add this function:

$scope.checkText = function() {
    if (!$scope.input.text)
        delete $scope.input.text;
};

And update your input tag as:

<input type="text" ng-model="input.text" ng-change="checkText()" />

2. Just modify your display style. Display the text only when it is available.

<p ng-show="input.text">text = {{ input.text }}</p>
<br/>
<p ng-show="input.number">number = {{ input.number }}</p>

answered May 26, 2016 at 7:17

Lokesh

5824 silver badges13 bronze badges

Comments

Dongkwon Lee · Accepted Answer · 2016-05-26 07:18:44Z

1

try ng-changed, remove Object Prop Key , when scope value is null or blank

<input type="text" ng-model="input.text" ng-change="removeProp('input.text');">
    <input type="number" ng-model="input.number">
    <p>{{ input }}</p>
    <script type="text/javascript">
      app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope, $timeout){
        $scope.input = {};
        $scope.removeProp = function(e){
          if(!eval('$scope.'+e)){
            eval('delete $scope.'+e);
          }
        }
      });

edited May 26, 2016 at 7:18

answered May 26, 2016 at 7:03

Dongkwon Lee

2131 silver badge10 bronze badges

2 Comments

Dean Christian Armada Over a year ago

No, what I want is instead of {"text":""} it should be {} when the value of the model "input.text" is null or blank

Dongkwon Lee Over a year ago

modified my comment;

eekboom · Accepted Answer · 2016-05-26 07:45:29Z

I think the cleanest way is to use a getter/setter function for your text value and to delete the property in the setter if the value is empty:

<input type="text" ng-model="inputText" ng-model-options="{ getterSetter: true }">
<input type="number" ng-model="input.number">
<p>{{ input }}</p>
<script type="text/javascript">
  app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope, $timeout){
    $scope.input = {};

    $scope.inputText = function(value) {
      if(arguments.length) {
        if(!value) {
          delete $scope.input.text;
        }
        else {
          $scope.input.text = value
        }
      }
      else {
        return $scope.input.text || "";
      }
    }
  });

See update plnkr at http://plnkr.co/edit/Dv86j1Clr6apWyWjZBPk?p=preview

Collectives™ on Stack Overflow

Remove key-value if input is null in angularJS

5 Answers 5

3 Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related