How to remove space of Search textbox?


#1

Hi All,

I want…
when user enters only space in search bar after validation failed place holder should show…
How can i do??


#2

Hey,

you could use angulars ngpattern directive to set a regex to validate your field (only contains characters -> and style your input if there are errors).
https://docs.angularjs.org/api/ng/directive/input

If input value was changed and is invalid, angular adds the classes ng-dirty ng-invalid…

All available classes:
ng-valid
ng-invalid
ng-pristine
ng-dirty
ng-touched
ng-untouched

Another solution use ng-change directive. There you can add a function, which is executed everytime the input model changes.

Or if you have a “send” button for your form/input -> replace all whitespaces of the string -> test if string.length === 0 or string === ‘’ then empty the model-value and return without saving or what ever you want to do in the success case.

Greetz.


#3

Thanks…

But how can set ng-model value from controller. when controller run first time??


#4

Hö?

set

$scope.inputs = {
   myInput = ''
};

and use

<input type="text" ng-model="inputs.myInput">

?


#5

When i typed space and submit. it is displaying validation failed. But it should display place holder text and space should remove.

I am not able to assign value from controller to template in textbox or search box.
How can do ???


#6

$scope.inputs = {
myInput = ‘’
};
displaying error…


#7

And in your controller:

$scope.myFormSubmit = function () {
   var tmpString = $scope.inputs.myInput;
   if (tmpString.test(/^\s+$/g)) {
      $scope.inputs.myInput = '';
      return;
   }
   // .....
}

What error appears???
It depends what you have already implemented…

Maybe an example would be nice.


#8
    <input id="search-inputbox" type="search" placeholder="{{ 'search_placeholder' | translate }}" ng-model="data.searchQuery">
<img ng-click="searchFilter(data);" src='img/search-logo.png'>

$scope.searchFilter = function(data) {
                if (data === undefined) {
                    data = ‘’;
                }

$scope.searchText = data[“searchQuery”] !== null && data[“searchQuery”] !== undefined ? data[“searchQuery”] : ‘’;
                if ($scope.searchText === ‘’) {
                    alert(‘Please enter valid search terms.’);
                }
                else {
                    $state.go(‘app.search’);
                }
            };

After press space and click on image space is not sending to controller and displaying validation failed.
Space is not removing from search field as well as not displaying place holder text.


#9

why are you using another scope variable.

If you are using ng-model=“data.searchQuery” you can access this value in your controller over $scope.data.searchQuery.

So you do not need to pass data to your function-

$scope.searchFilter = function() {
   if ($scope.data.searchQuery === null 
   || $scope.data.searchQuery === undefined
   || $scope.data.searchQuery.test(/^\s*$/)) {
      $scope.data.searchQuery = '';
      alert('please enter valid search terms.');
      return;
   }
   $state.go('app.search');
}

#10

I do not. why it is give error when i am trying to user
alert($scope.data.searchQuery);

Why two way binding is not working ? What would be the issue??
Am i any thing missing ??


#11

Do you have initialized this value at the beginning of your controller like:
$scope.data = {
searchQuery = ‘’
};
?


#12

it is displaying error…


#13

ahh sry

$scope.data = {
  searchQuery: ''
};

it was a writing mistake of me.


#14

Hi @bengtler
I tried above code. It is not removing space… :frowning:


#15

Hi @bengtler,

If i press space it is not getting any value in controller and also not assigning blank from controller to view.

Thnaks.