не разрешать больше, чем md-maxlength = "200"

Question

У меня есть md-ввод с текстовой областью.

Я хочу иметь возможность ограничить количество символов, вводимых пользователем.

Я использую md-maxlength, но кроме показасчетчик ... он ничего не ограничивает.

Затем я добавляю функцию для ограничения длины входного значения, но если я превышаю предел, он больше не вызывает мою функцию, на самом деле, он называет это, но значение равно нулю.

Как я могу это исправить ??

<textarea ng-model="user.title" md-maxLength="5" ng-change="inputLengthLimiter(user.title,5);"></textarea>


  $scope.inputLengthLimiter = (value, maxLength) => {
    console.log(value)
      if(value.length > maxLength){
        value = value.substring(0,maxLength);
      }
    }

https://codepen.io/anon/pen/WLQKNG

Answer 1

В документации Angularjs сказано, что

ngMaxlength (необязательно) число Устанавливает ключ ошибки проверки максимальной длины, если значение больше максимальной длины.Установка атрибута в отрицательное или не числовое значение, позволяет просматривать значения любой длины.

означает, что они установят ошибку проверки для этого.

Вы должны добавить maxlength="{{user.maxLength}}"в вашу текстовую область, чтобы ограничить количество текста.

На самом деле реальная проблема заключается в том, что он просто устанавливает ошибку проверки, и из-за этого ваше ng-change также получит неопределенную ошибку.Вы можете проверить свою консоль и увидеть, что есть ошибки.

Итак, ваш html должен выглядеть следующим образом

 <textarea ng-model="user.title" ng-maxLength="{{user.maxLength}}"
 maxlength="{{user.maxLength}}" ng-change="inputLengthLimiter(user,user.maxLength);"></textarea>

Вы также можете удалить ng-change после этого изменения, поскольку пользователь будетне разрешается идти дальше максимальной длины.

Контроллер:

angular
  .module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('DemoCtrl', function($scope) {
    $scope.user = {
      title: 'Developer',
      maxLength:5
    }; 

  $scope.inputLengthLimiter = (user) => {
    console.log(user.title)
      if(user.title.length > user.maxLength){
        user.title = user.title.substring(0,user.maxLength);
      } 
    }
   $scope.inputLengthLimiter($scope.user)

  })
  .config(function($mdThemingProvider) {

    // Configure a dark theme with primary foreground yellow

    $mdThemingProvider.theme('docs-dark', 'default')
      .primaryPalette('yellow')
      .dark();

  });

Демо