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

Does AngularJS store a value in the $error.maxlength object?

本文关键字：一个 存储 是否 error 对象 maxlength AngularJS      更新时间：2023-09-26

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

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

设置值时要注意，因为它是反转的。 例如 $setValidity( 真 (，将$error翻转为假。

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

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

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

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

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

Angularjs 链接中的动态输入名称

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

如果您不知道，您可以为每个单独的输入写入 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;
}
相关文章：