Javascript AngularJS是否在$error.maxlength对象中存储值？

我已经通过Angular设置了一个UI页面，我正在尝试利用输入元素上内置的

ngmaxlength

验证器。长话短说，我知道

$scope.form.$error

以及在验证失败的情况下该对象如何具有

maxlength

属性。但是我想显示一条特定于违反的字符长度的错误消息，并且我没有看到我指定的长度存储在这个对象上的任何地方。是否有人知道是否可以访问此项，这样我就不必为每个违反最大长度的输入单独写出错误消息？

编辑：要回答您的问题，是的，angular确实在$error对象中存储了一个布尔值，您可以通过对象中设置的键访问该值。在我下面提供的代码和JSFIDLE中，我们将为ANGLORAL设置键，并将值设置为true或false

设置值时请注意，因为它是反向的。例如$setValidity（true），将$error翻转为false

好的，这是我想你要找的

在Angularjs v1.2.13中，您将无法访问ng消息或$validator管道， 这就是我们使用$formatters和$parser的原因

在本例中，我使用命名输入，但在您的示例中，可能需要动态输入名称

另外，如果您使用的是输入而不是表单，那么要显示错误消息就必须使用单独的自定义指令

如果是这样，那么请在此处查找动态命名的输入字段以获取帮助

让我知道这是否有效；我将根据需要进行更改，以便与您联系

如果您不知道，您可以为每个单独的输入写入Angular的maxlength

如果在下面的指令中将updateValidity（）函数中的“maxlength”更改为类似于“butter”的值，那么$scope.form.inputname.$error将类似于

$scope.formname.inputname.$error { butter: true }

if you also used ng-maxlength="true", then it would be
$scope.formname.inputname.$error { butter: true, maxlength: true }

Another example if you used ng-maxlength, and capitalized the 'maxlength' in the directive to 'Maxlength'

Then you would get 
$scope.formname.inputname.$error { maxlength: true(angular maxlength), Maxlength: true(your maxlength)

And of course if you name it the same, then yours writes over angulars
$scope.formname.inputname.$error { maxlength: true };

关键是您可以将自己的名称添加到angular$error对象中；你可以写在Angular的上面；当您使用Angular的指令时，您可以使用Angular提供的内容：比如ng required=“true”或ng maxlength=“true”

链接到JSFIDLE上的angularjs版本

---

你不能用这种方式将maxlength与ng maxlength一起使用吗大多数设备上都不会发生冲突你使用的是什么版本的Angularjs？@CognitiveDesire我不理解你的评论。@SoEzPz我使用的是v 1.2.13，这稍微改变了一些情况。为了清楚起见，您希望在存在最大长度冲突的输入旁边显示一条消息；您想让消息声明maxlength超过了###，或者仅仅是maxlength超过了，应该是我感谢您的详细回答。也许我的问题有点不清楚，但当你说你可以将自己的属性添加到$error对象时，你的回答基本上给了我一个解决方案。基本上，我想要一种跟踪我在视图中设置$error.maxlength属性的方法，因为我没有看到任何方法可以这样做。发布您的解决方案，以便找到此页面的每个人都可以学习。我很高兴这有帮助。

<div ng-app="myApp">
  <form name="myForm">
    <div ng-controller="MyCtrl">
      <br>
      <label>Input #1</label>
      <br>
      <input ng-model="field.myName" name='myName' my-custom-length="8" />
      <span ng-show="myForm.myName.$error.maxlength">
        Max length exceeded by {{ myForm.myName.maxlength }}
      </span>
      <br>
      <br>
      <label>Input #2</label>
      <br>
      <input ng-model="field.myEmail" name='myEmail' my-custom-length="3" />
      <span ng-show="myForm.myEmail.$error.maxlength">
        Max length exceeded by {{ myForm.myEmail.maxlength }}
      </span>
    </div>
  </form>
</div>


var app = angular.module('myApp', []);

app.controller('MyCtrl', function ($scope) {
  $scope.field = {};
});

app.directive("myCustomLength", function () {

  return {
    restrict: 'A',
    require: 'ngModel',

    link: function (scope, element, attrs, ctrl) {
      if (!ctrl) { return } // ignore if no ngModel controller

      ctrl.$formatters.push(validateInput);
      ctrl.$parsers.unshift(validateInput);

      function validateInput(value) {
        if (!value) {
          updateValidity(false);
          return;
        }
        inputLength(value);
        var state = value.length > attrs.myCustomLength;
        updateValidity(state);
      }

      function inputLength(value) {
        ctrl.maxlength = null;
        var length = value.length > attrs.myCustomLength;
        if (length) {
          ctrl.maxlength = (value.length - attrs.myCustomLength).toString();
        }
      }

      function updateValidity(state) {
        ctrl.$setValidity('maxlength', !state);
      }
    } // end link
  } // end return
});

input.ng-invalid {
  border: 3px solid red !important;
}