Set limit to Textarea in AngularJs

Question

  <md-input-container class="md-block" style="margin-bottom: 6px;">
             <label style="font-size: 14px; font-weight: 400; line-height: .75;">
              Message
            </label>
            <textarea ng-model="formData.message"
              md-maxlength="10" rows="5"
              md-select-on-focus="">
            </textarea>
 </md-input-container>

Hi,I have a textarea where I am trying to set a max limit to ten characters say. But md-maxlength is not working

You can find the demo - https://plnkr.co/edit/jyRIABUKlNexmvQEUiIn?p=preview

Thanks :)

score 2 · Answer 1 · edited May 23 '17 at 12:00

Use ng-maxlength see the full details here

Example code

<script>
  angular.module('ngMaxlengthExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.maxlength = 5;
    }]);
</script>
<div ng-controller="ExampleController">
  <form name="form">
    <label for="maxlength">Set a maxlength: </label>
    <input type="number" ng-model="maxlength" id="maxlength" />
    <br>
    <label for="input">This input is restricted by the current maxlength: </label>
    <input type="text" ng-model="model" id="input" name="input" ng-maxlength="maxlength" /><br>
    <hr>
    input valid? = <code>{{form.input.$valid}}</code><br>
    model = <code>{{model}}</code>
  </form>
</div>

and if you dont want to let the user type further

use this

pp.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keypress", function(e) {
                if (this.value.length == limit) e.preventDefault();
            });
        }
    }
}]);

<input limit-to="4" type="number" class="form-control input-lg" ng-model="search.main" placeholder="enter first 4 digits: 09XX">

Set limit to Textarea in AngularJs

2 Answers2