1

Estou precisando criar uma forma de mostrar a quantidade de caracteres restantes em um textearea de cadastro de uma descrição para um determinado perfil.

Essa parte é a de inserção dos dados:

<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' />

Essa outra é a parte da minha visualização dos dados:

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

Quero saber se existe alguma forma de fazer a operação com o Angular sem eu ter que fazer toda uma função em JavaScript, se existe alguma diretiva de fazer essa funcionalidade, ou uma forma padrão no controller e na view.

2 Respostas 2

2

Existe sim, no seu caso ficaria:

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

*caso você esteja usando angularJS 1.1.1 ou uma versão mais recente é necessário adicionar ng-trim="false" no textarea, segue um exemplo:

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

1
  • Realmente muito simples e funcional, sem precisar criar toda uma função no controller e trazer para a view, todas as respostas que eu achava eram criando funções externas para uma coisa simples. Commented 10/04/2017 às 13:56
1

Não há necessidade de componentes externos. Entretanto você precisa expandir o comportamento padrão de ng-model, já que ele não propaga as propriedades do elemento, maxlength entre elas:

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>

7
  • 1
    Uma dúvida, porque ele não mostra "199" ? Ele pula direto do 200 pro 198 Commented 10/04/2017 às 13:53
  • @ArturoTemplário Isso é por causa da presença do ng-minlength, que invalida o modelo se o valor tiver um comprimento menor do que 2.
    – OnoSendai
    Commented 10/04/2017 às 13:58
  • muito obrigado, não entendo muito sobre AngularJS ainda Commented 10/04/2017 às 13:59
  • @ArturoTemplário sempre um prazer! Estamos todos aprendendo. =)
    – OnoSendai
    Commented 10/04/2017 às 13:59
  • @OdoSendai Também reparei isso, ele pulou do 200 para o 198, no outro exemplo do Mathias ele mostra normalmente 200, 199, 198 ... eu não sabia que o ng-minlength invalidaria a escrita do número 199 na tela nesse caso Commented 10/04/2017 às 14:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .