Why custom filter is not running in angular?

Question

Below is my custom filter.

app.filter('inputFilter', function () {
return function (str) {
    var output;

    if (str != "" && str != null && isNaN(str)) {
        output = str.trim().toLowerCase();

        return output;
    }
    else {
        return str;
    }
}

HTML

 <form method="post" name="loginForm" class="form-group" novalidate>
    <input type="email"  name="username" ng-model="user.username" class="form-control" placeholder="Your email address" required /> 
     {{ user.username | inputFilter }} <!--this line is just for test purpose-->
    <input type="button" class="btn btn-primary" value="Login" ng-click="login(user)" />

 </form>

In this real scenario, filter is not executing.

However, when for testing purpose I flip my html as:-

<input type="text" ng-model="username" class="form-control" /> <br/>

    {{ username | inputFilter }}

It filters the input string.

My requirement is :

This is login form, so when user submits his username I want to filter the input & then pass to controller (I agree there are more simple way to do but I want to do it using filter)

How do I run filter for my requirement.

Do you expect filter to modify the value stored in user.username? — raina77ow
– raina77ow, Commented Mar 18, 2017 at 10:31
@raina77ow, yes not stored, this is login form, so when user submits his username I want to filter the input & then pass to controller — Kgn-web
– Kgn-web, Commented Mar 18, 2017 at 10:31
But it doesn't work this way. Quoting the docs: Filters are just functions which transform input to an output. The best you can do is using filter in a getter for that field. — raina77ow
– raina77ow, Commented Mar 18, 2017 at 10:36
@raina77ow, "The best you can do is using filter in a getter for that field" Sorry!! I didn't get your this point. Can you please add snippet?? — Kgn-web
– Kgn-web, Commented Mar 18, 2017 at 10:37
@raina77ow, Custom Filter is filtering the input if I pass simple ng-model but if I pass as user.username , then it doesn't so what's causing this — Kgn-web
– Kgn-web, Commented Mar 18, 2017 at 10:40

Sachila Ranawaka · Accepted Answer · 2017-03-18 10:39:56Z

1

When you using type="email" in the input field , if only email is valid then the value gonna assign to ng-model variable. That's why only for valid email filter would work.

if type="text" then for every character you type model gonna change and filter will get executed

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

$scope.user =  {};
})
.filter('inputFilter', function () {
  return function (str) { 
    var output;

    if (str != "" && str != null && isNaN(str)) {
        output = str.trim().toLowerCase();

        return output;
    }
    else {
        return str;
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <form method="post" name="loginForm" class="form-group" novalidate>
    <input type="email"  name="username" ng-model="user.username" class="form-control" placeholder="Your email address" required /> 
     {{ user.username | inputFilter }}
    <input type="button" class="btn btn-primary" value="Login"               ng-click="login(user)" />

 </form>
</div>

answered Mar 18, 2017 at 10:39

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

1 Comment

Kgn-web Over a year ago

Yes.Correct,Thankssssssssssssss

Gangadhar Jannu · Accepted Answer · 2017-03-18 10:48:48Z

There is nothing wrong with your filter.

The reason you thought your filter is not working is because you've used input type="email" in which ng-model will only update when the value is valid.

and in testing case it is working because you've used type="text" which will automatically updates.

See the demo.

angular.module('myApp', []);

angular
  .module('myApp')
  .controller('MyController', MyController)
  .filter('inputFilter', inputFilter);

MyController.$inject = ['$scope'];

function MyController($scope) {
  $scope.login = function(usr) {
    alert(usr);
  };
  $scope.user = {
    username: '[email protected]',
    name: 'ANYthing'
  };

}


function inputFilter() {
  return function(str) {
    var output;

    if (str != "" && str != null && isNaN(str)) {
      output = str.trim().toLowerCase();

      return output;
    } else {
      return str;
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">

  <form method="post" name="loginForm" class="form-group" novalidate>
    <div style="border:1px solid"><input type="email" name="username" ng-model="user.username" class="form-control" placeholder="Your email address" required />
      <p>email:</p>
      <p>value: {{ user.username }}</p>
      <p>filter: {{ user.username | inputFilter }}</p>
    </div>
    <div style="border:1px solid">
      <input type="text" name="name" ng-model="user.name" class="form-control" placeholder="Your email address" required />
      <p>text:</p>
      <p>value: {{ user.name }}</p>
      <p>filter: {{ user.name | inputFilter }}</p>
    </div>
    <!--this line is just for test purpose-->
    <input type="button" class="btn btn-primary" value="Login" ng-click="login(user)" />

  </form>

</div>

Collectives™ on Stack Overflow

Why custom filter is not running in angular?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related