Question

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

Answer 1

编辑：为了回答你的问题，yes angular会在$ error对象中存储一个布尔值，你可以通过对象中设置的键访问它。对于我在下面和jsFiddle中提供的代码，我们设置了angular的键，以及true或false的值。

在反转时设置值时要小心。恩。 $ setValidity（true），将$ error翻转为false。

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

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

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

另外，如果您使用输入但没有表单，那么要显示错误消息必须使用单独的自定义指令。

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

dynamic input name in Angularjs link

让我知道这是否有效;我会根据需要进行更改，以便提醒您！

如果您不知道，可以为每个输入写入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 };

重点是您可以将自己的名称添加到角度$ 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;
}

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

1 个答案: