Calling angularjs function on text input based on length

Question

I have a text box. I would like to call a method inside controller only when user has filled in 'n' or more number of characters in the textbox.

Can someone please give me pointers on how to approach this?

Thanks

Answer 1

Id recommend just using ngChange and binding to an evaluation function. Below is a sample

angular.module('inputChange', [])
    .controller('TextInputController', ['$scope', function ($scope) {
    var inputMin = 3;
    $scope.someVal = '';
    $scope.result = '';
    $scope.textChanged = function() {
        if ($scope.someVal.length >= inputMin) executeSomething()
        else $scope.result = '';
    };

    function executeSomething() {
        $scope.result = $scope.someVal;
    };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="inputChange" ng-controller="TextInputController">
    <input type="text" ng-model="someVal" ng-change="textChanged()" ng-Trim="false" /> 
    <br />

    someVal: <span ng-bind="someVal"></span>
    <br />
    Result: <span ng-bind="result"></span>
    <br />
    someVal Length: <span ng-bind="someVal.length"></span>
    <br />
    Result Length: <span ng-bind="result.length"></span>
</div>

Answer 2

You could simply achieve this by using ng-keyup directive

ng-keyup="(1myNgModel.length >= n) && myFunction()"

Desired function will only gets called only if length of model is greater than equal to n length

Working Plunkr

---

Though the better version would be having ng-model-options with debounce time, so that it will reduce number of value change. After that we can easily use ng-change directive to fire function.

<input type="text" ng-model="myNgModel" 
  ng-change="(myNgModel.length >= 3) && myFunction()" 
  ng-model-options="{ debounce: 200 }" />

Updated Demo

Answer 3

You can add a directive to your element and $watch for model changes. Then you can fire any logic you wish when your model has changed and has a value. In this case, lets call our model expression. Here is an example for a <textarea> element. This approach can just as well be used for an <input /> element as well.

<textarea watcher ng-model="expression"></textarea>

---

app.directive('watcher', [function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            scope.$watch(attrs.ngModel, function (v) {
                if(v) {
                    // you have a value
                } else {
                    // no value
                }
            });
        }
    }
}]);

JSFiddle Example

Answer 4

A good way to do this is to use a directive. Here's how it might be done:

view:

<div ng-app="foo" ng-controller="fooController">
    <textarea text-length-handler="doThing()" text-length="6" ng-model="text">
    </textarea>
</div>

js:

angular.module('foo', [])
.directive('textLength', function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            textLengthHandler: '&'
        },
        link: function ($scope, $element, $attrs, ctrl) {
            var limit = parseInt($attrs.textLength);
            var handler = function(){
                if (ctrl.$modelValue.length >= limit) {
                    $scope.textLengthHandler()
                }
            };
            $element.on('keypress', handler);
            // remove the handler when the directive disappears
            $scope.$on('destroy', function(){
                $element.off('keypress', handler)
            });
        }
    }
})

Fiddle here:

http://jsfiddle.net/dtq0mz8m/

Answer 5

If you tie the input field to a variable using ngModel, you can watch it from the controller (is not very elegant, though) using $watch or $observe whenever it changes, and check the length.