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

I have a UI page setup via Angular and I am trying to use the inline validator ng-maxlength

for an input element. In short, I know about $scope.form.$error

and how this object has a property maxlength

in case of validation failure. But I want to show an error message specific to the length of the character that was broken and I don't see anywhere that the specified length was stored on this object. Does anyone know if it is possible to access this so I don't have to write out a separate error message for each input that violates the maximum length?

+3


source to share


1 answer


EDIT. To answer your question, yes angular stores a boolean in the $ error object, accessible to you via the keys (s) set in the object. In the case of the code below and in the jsFiddle, we are setting the key for angular to true or false.

Be careful when adjusting the value in the opposite direction. ex. $ setValidity (true), flips $ error to false.

Ok, here is what I think you were looking for ...

In Angularjs v1.2.13 you won't have access to the ng post or the $ validator pipeline, so $ formatters and $ parsers are used.

In this case I am using named inputs, but perhaps in your case you need dynamic input names?

Also, if you are using inputs but don't have a form, then getting the error message should be done with a separate custom directive.

If so, then please take a look at dynamically named input fields for some help.

dynamic input name in Angularjs link

Let me know if this works; I will make the necessary changes to LOCK YOU!



If you don't know, you can write above the angular maxlength for each individual input.

If you changed "maxlength" in the updateValidity () function in the directive below to something like "butter" then $ scope.form.inputname. $ error would be something like

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

      

You can add your own names to the angular $ error object; you can write over Angular 's; and you can just use what angular gives you when you use angular directives: for example ng-required = "true" or ng-maxlength = "true"

Link to your angularjs version on jsFiddle 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 Here if you need it.

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

      

+1


source







All Articles