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.

Answer 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>