我试图做一个简单的textarea与“剩余许多字符”以及验证。
当我使用ng-maxlength验证表单时,一旦长度达到最大长度,它将立即重置我的字符计数。这是plunkr任何解决方法?

  <body ng-controller="MainCtrl">
    <div ng-form="noteForm">
      <textarea ng-maxlength="15" ng-model="result"></textarea>
      <p>{{15 - result.length}} chars remaining</p>
      <button ng-disabled="!noteForm.$valid">Submit</button>
    </div>
  </body>

最佳答案

当您的textarea超过15个字符时,result变为undefined -这就是ng-min/maxlength指令的工作方式。我认为您必须编写自己的指令。这是一条指令,它将在15个字符后阻止输入:

<textarea my-maxlength="15" ng-model="result"></textarea>

app.directive('myMaxlength', function() {
  return {
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {
      var maxlength = Number(attrs.myMaxlength);
      function fromUser(text) {
          if (text.length > maxlength) {
            var transformedInput = text.substring(0, maxlength);
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
            return transformedInput;
          }
          return text;
      }
      ngModelCtrl.$parsers.push(fromUser);
    }
  };
});

fiddle

更新:以允许超过15个字符,但是当计数超过15个时禁用提交按钮:

link: function (scope, element, attrs, ngModelCtrl) {
  var maxlength = Number(attrs.myMaxlength);
  function fromUser(text) {
      ngModelCtrl.$setValidity('unique', text.length <= maxlength);
      return text;
  }
  ngModelCtrl.$parsers.push(fromUser);
}

fiddle

10-05 20:41
查看更多