4

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

4

1 回答 1

3

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

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

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

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

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

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

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

Angularjs链接中的动态输入名称

让我知道这个是否奏效; 我会根据需要进行更改以连接您！

如果你不知道，你可以为每个单独的输入写 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 链接

<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;
}
于 2014-12-08T18:07:23.980 回答