angularjs – ng-maxlength拧紧我的模型

发布时间：2020-12-17 08:43:14 所属栏目：安全来源：网络整理

导读：我试图做一个简单的textarea与“这么多的字符剩余”以及验证。当我使用ng-maxlength验证我的表单时，它会在长度达到最大长度后立即重置我的charcount。这是 plunkr任何解决方法？ body ng-controller="MainCtrl" div ng-form="noteForm" textarea ng-maxlen

我试图做一个简单的textarea与“这么多的字符剩余”以及验证。
当我使用ng-maxlength验证我的表单时，它会在长度达到最大长度后立即重置我的charcount。这是 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个字符，结果变成未定义 – 这就是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,ngModelCtrl) {
  var maxlength = Number(attrs.myMaxlength);
  function fromUser(text) {
      ngModelCtrl.$setValidity('unique',text.length <= maxlength);
      return text;
  }
  ngModelCtrl.$parsers.push(fromUser);
}

fiddle

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!