Here's a solution I think you'll be happy with... Here's a working jsbin

HTML:

<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body ng-app="app" ng-controller="MainCtrl as vm">
    <div>
      <form name="vm.myForm">
        <input name="myInput" id="theInput" ng-model="foo" ng-minlength="2" ng-maxlength="{{vm.max}}" />
      </form>
    </div>
    <hr />
    <div>
      Can't get it from the NgModelController normally:
      <pre>{{vm.normalNgModelCtrl | json}}</pre>
    </div>
    <hr />
    <div>
      But you could write your own <code>ng-model</code> directive which will be used in addition to
      the normal directive and publish those values to the controller
      <pre>{{vm.myForm.myInput | json}}</pre>
    </div>
    <hr />
    <div>
      It can even be dynamic :-)
      <input type="number" ng-model="vm.max" />
    </div>
    <hr />
    <div>
      Or you could always hack it with some regular JavaScript... &lt;shudders-in-fear&gt;
      <div>
        Minlength: <span id="minlength"></span>
      </div>
      <div>
        Maxlength: <span id="maxlength"></span>
      </div>
    </div>
  </body>
</html>

JavaScript

var app = angular.module('app', []);

app.controller('MainCtrl', function() {
  var vm = this;

  vm.max = 6;

  vm.normalNgModelCtrl = {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "myInput",
    "$options": null
  };
});

app.directive('ngModel', function attributeNgModelDirective() {
  return {
    require: 'ngModel',
    link: function(scope, el, attrs, ctrl) {
      ctrl.attributes = attrs;
    }
  };
});

// regular JavaScript... probably don't need to do it this way...
(function() {
  var inputEl = document.getElementById('theInput');
  var minlengthEl = document.getElementById('minlength');
  var maxlengthEl = document.getElementById('maxlength');
  minlengthEl.innerText = inputEl.getAttribute('ng-minlength');
  maxlengthEl.innerText = inputEl.getAttribute('ng-maxlength');
})();

Way to retrieve ng-minlength/maxlength value in form object #11671

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions