How to check if query params are empty with AngularJS forms

Question

I have a project where i use query params which are passed to the back end for a search.

They are passed using the $http.get method in AngularJS.

Some params are not required for the search, so I want them to not be in the url when they are empty.

How can i get this functionality?

Below is my code:

    <!DOCTYPE html>
    <html lang="en"  ng-app = "searchApp">

     <script type="text/javascript">
     var searchApp = angular.module("searchApp", []);

     searchApp.controller("searchListingsCtrl", ['$scope', '$http', function($scope, $http) {
     $scope.searchListings = function(){        

     if ($scope.checkIn == '') {}
     var searchListingObj = {
            checkIn : $scope.checkIn,
            checkOut : $scope.checkOut,
            country : $scope.country,
            city : $scope.city,
            state : $scope.state,
            accommodates : $scope.accommodates,

     }

    var res = $http.get('http://www.localhost:8080/messenger/webapi/listings', searchListingObj);
    res.success(function(data, status, headers, config) {
        $scope.message = data;
    });
    res.error(function(data, status, headers, config) {
        alert( "failure message: " + JSON.stringify({data: data}));
    });     
    };
}]);
</script>

<body ng-controller="searchListingsCtrl">

   <form action="/listings" name="listings" ng-submit="searchListings()">
        <input type="text" name="neighborhood" placeholder="Neighborhood:" ng-model="state">    
        <input type="text" name="town" placeholder="Town:" ng-model="city">
        <input type="text" name="country" placeholder="Country:" ng-model="country">            
        People:<select class="peopleSelect" placeholder="People:" ng-model="accommodates"> </select> 
        <input type="text" id="arrival" name="arrival" value="Arrival" ng-model="checkIn">
        <input type="text" id="departure" name="depart" value="Departure" ng-model="checkOut">
        <input type="submit" name="submit" value="Search" id="Search_submit">
    </form>
  </body>

Won't able to understand your question. Could you please elaborate it ?? — Kaustubh Khare
– Kaustubh Khare, Commented Sep 20, 2017 at 17:26
I rephrased it, check the question again please and ask me for any further info. — George Sp
– George Sp, Commented Sep 20, 2017 at 17:34
use lodash in your project and put the code as _.compact(searchListingObj), this will remove the null value field in your object. Or else, you need to use angular.forEach and check it individually. — Alaksandar Jesus Gene
– Alaksandar Jesus Gene, Commented Sep 20, 2017 at 18:00

georgeawg · Accepted Answer · 2017-09-20 20:17:00Z

1

Use the required attribute on inputs to prevent form submission of empty fields:

<form  ̶a̶c̶t̶i̶o̶n̶=̶"̶/̶l̶i̶s̶t̶i̶n̶g̶s̶"̶  name="listings" ng-submit="searchListings()">
    <input type="text" name="neighborhood" placeholder="Neighborhood:"
           ng-model="fdata.state"  ͟r͟e͟q͟u͟i͟r͟e͟d͟ />    
    <input type="text" name="town" placeholder="Town:" 
           ng-model="fdata.city" ͟r͟e͟q͟u͟i͟r͟e͟d͟ />
    <input type="text" name="country" placeholder="Country:"
           ng-model="fdata.country"  ͟r͟e͟q͟u͟i͟r͟e͟d͟ />            
    People:<select class="peopleSelect" placeholder="People:"
                   ng-model="fdata.accommodates"  ͟r͟e͟q͟u͟i͟r͟e͟d͟ /> 
           </select> 
    <input type="text" id="arrival" name="arrival" value="Arrival"
           ng-model="fdata.checkIn"  ͟r͟e͟q͟u͟i͟r͟e͟d͟ />
    <input type="text" id="departure" name="depart" value="Departure"
           ng-model="fdata.checkOut"  ͟r͟e͟q͟u͟i͟r͟e͟d͟ />
    <input type="submit" name="submit" value="Search" id="Search_submit" />
</form>

For more information, see AngularJS Developer Guide - Forms.

Also notice how the ng-model attributes have been changed to put the data on a JavaScript object. This makes it easier to submit:

$scope.fdata = {};
var url = "http://www.localhost:8080/messenger/webapi/listings";

$scope.searchListings = function() {
    var config = { params: fdata };

    $http.get(url, config)
      .then(function(response) {
        $scope.message = response.data;
    })
      .catch(function(response) {
        var data = response.data;
        console.log( "failure message: " + JSON.stringify({data: data}));
        throw response;
    });             

};

Also be aware that the $http .success and .catch methods have been deprecated and removes from AngularJS v1.6. Instead, use the .then and .catch methods.

edited Sep 20, 2017 at 20:17

answered Sep 20, 2017 at 18:36

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

2 Comments

George Sp Over a year ago

You did not understand my question here. Not all input input fields are required and what i want is to check if they are empty. If one field is empty i dont want it to be as a search parameter. Think of them as filters, i want to check which of them are enabled

georgeawg Over a year ago

@GeorgeSp, StackOverflow is not a code writing service. You need to show code for what you have tried to achieve what you want. If you want to create a params object which omits properties for empty fields, that is a trivial problem.

Collectives™ on Stack Overflow

How to check if query params are empty with AngularJS forms

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related