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验证错误键该值比maxlength长。将属性设置为负值或非数字值，允许任意长度的视图值。

表示他们将为此设置验证错误。

您应该在文本区域添加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();

  });

Demo

不允许更多，然后md-maxlength =“ 200”

1 个答案: