how can i set max char while using AngularJS on iphone

Question

im trying to set the max char in the textbox

            <form class="form-horizontal">
            <input type="text" ng-model="formtodotext" ng-model-instant maxlength="22">
            <button class="btn btn-info"ng-click="addTodo()"><i class="icon-plus"></i>Toevoegen</button>
           </form>

but it doesn't work on iphone, in chrome it does

PS: max="22" doesn't work either

Sorry if i wrote this wrong, stack overflow noob..

Answer 1

If you want to just mark an input as invalid if typed text is longer than 22, you can use ng-pattern:

<input type="text" ng-pattern="/^.{0,22}$/" ng-model="formtodotext" ng-model-instant>

Preventing user input if he tries to type 23rd character needs a custom directive:

app.directive('maxLength',function(){
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, el, attrs, ngModelCtrl){
      function checkLength(text) {
        var old = ngModelCtrl.$modelValue;
        if(text.length<=attrs.maxLength) {
          return text;
        }else{
          ngModelCtrl.$setViewValue(old);
          ngModelCtrl.$render();
          return old;
        }
      }
      ngModelCtrl.$parsers.push(checkLength);
    }
  }
});

Use it like that:

<input type="text" max-length="22" ng-model="formtodotext" ng-model-instant>

Answer 2

I would expect maxlength to work on iOS as well as chrome. You don't need to use ng-pattern for this there's an ng-maxlength. It marks the form as invalid but it doesn't stop the user entering more text.

<input type="text" ng-model="formtodotext" ng-model-instant ng-maxlength="22" maxlength="22">