String count in textarea Angularjs

Question

String count in textarea Angularjs

Asked 7 years, 2 months ago

Viewed 1,517 times

1

I need to create a way to show the amount of remaining characters in a textearea registration of a description for a particular profile.

That part is the entry of the data:

<textarea class="form-control" type="text" 
          name="description_validate" ng-model="group.description" 
          ng-minlength='{{valideDescricao.description_validate.minlength}}' 
          ng-maxlength="{{valideDescricao.description_validate.maxlength}}" 
          ng-required='valideDescricao.description_validate.required' />

That other part is the part of my data visualization:

<td align="justify" style="width: 500px"  data-title="'Descrição'" filter="{description: 'text'}" >{{row.description}}</td>

I want to know if there is any way to do the operation with Angular without I have to do a whole function in Javascript, if there is any directive to do this functionality, or a standard form in controller and in the view.

2 answers

1

There is yes, in your case would be:

<textarea class="form-control" type="text" 
          name="description_validate" ng-model="group.description" 
          ng-minlength='{{valideDescricao.description_validate.minlength}}' 
          ng-maxlength="{{valideDescricao.description_validate.maxlength}}" 
          ng-required='valideDescricao.description_validate.required' />

<span>{{valideDescricao.description_validate.maxlength - group.description.length}} restantes</span>

*if you are using Angularjs 1.1.1 or a newer version you need to add ng-trim="false" in the textarea, follows an example:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
    <textarea ng-model="txtarea" ng-trim="false" maxlength="200"></textarea>
    <span>{{200 - txtarea.length}} caracteres restantes</span>
</body>

Really very simple and functional, without having to create a whole function in the controller and bring it to the view, all the answers I thought were creating external functions for one simple thing.

– Philip Developer

2017/04/10 at 13:56

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.

by OnoSendai • **36,218** points · Answer 1 · 2017-04-10T13:52:53+00:00

There is no need for external components. However you need to expand the default behavior of ng-model, since it does not propagate the properties of the element, maxlength among them:

angular.module('myApp', [])
.directive('ngModel', function attributeNgModelDirective() {
  return {
    require: 'ngModel',
    link: function(scope, el, attrs, ctrl) {
      ctrl.attributes = attrs; //adiciona os atributos do elemento como uma
                               // propriedade do modelo
    }
  };
})
.controller('myController', function($scope){});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="myApp">
  <form name="meuForm">
    <div ng-controller='myController'>
       <input name="entrada" id="entrada" ng-model="description" ng-minlength="2" ng-maxlength="200" />
       <br/>
       <span>Caracteres restantes: {{meuForm.entrada.attributes.maxlength - meuForm.entrada.$viewValue.length}}</span>
       <pre>{{meuForm.entrada | json }}</pre>

    </div>
  </form>
</div>