javascript - AngularJS 是否在 $error.maxlength 对象中存储了一个值？

Question

我已经通过 Angular 设置了一个 UI 页面，我正尝试在输入元素上利用内置的 ng-maxlength 验证器。长话短说，我知道 $scope.form.$error 以及在验证失败的情况下该对象如何具有 maxlength 属性。但是我想显示一条特定于违反的字符长度的错误消息，而且我在任何地方都看不到我指定的长度存储在这个对象上。有谁知道是否可以访问它，所以我不必为每个违反最大长度的输入写出单独的错误消息？

Answer 1

编辑:为了回答您的问题，是的，angular 确实在 $error 对象中存储了一个 bool 值，您可以通过对象中设置的键访问该值。对于我在下面和 jsFiddle 中提供的代码，我们设置了 angular 的键，以及 true 或 false 的值。

设置值时要注意，因为它是相反的。前任。 $setValidity( true )，将 $error 翻转为 false。

好的，这就是我认为您正在寻找的...

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

在这种情况下，我使用的是命名输入，但在您的情况下，您可能需要动态输入名称？

另外，如果您使用的是输入而不是表单，则必须使用单独的自定义指令来获取要显示的错误消息。

如果是这样，那么请在此处查看动态命名的输入字段以获得一些帮助。

dynamic input name in Angularjs link

让我知道这是否可行；我会根据需要进行更改以连接您!

如果您不知道，您可以为每个单独的输入重写 Angular 的最大长度。

如果您在下面的指令中将 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"

在 jsFiddle 上链接到你的 angularjs 版本 jsFiddle LInk

<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
});

如果您需要，请在此处使用 CSS。

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