How to add max-length attribute to Angular-xeditable?

Question

<span editable-text="contact.phoneNumber" maxlength="5"  e-name="phoneNumber" e-form="contactForm" >
  {{ contact.phoneNumber || '' }}
</span>

I have used the directive inside a span and it is generating and inputbox on run time, when we click on a button to edit the Contact Number. I want to add a maximum length to this input box. Any suggestions?

Answer 1

you can use

e-maxlength e-minlength

if you see the documentacion , on e attribute you have this:

Attributes defined with e-* prefix automatically transfered from original element to control.

Answer 2

Create a directive to limit the value:

app.directive("limitTo", [function() {
return {
    restrict: "A",
    link: function(scope, elem, attrs) {
        var limit = parseInt(attrs.limitTo);
        angular.element(elem).on("keydown", function() {
            if (this.value.length == limit) return false;
        });
    }
}   }]);

<input limit-to="4" type="number" class="form-control input-lg" ng-model="search.main" placeholder="enter first 4 digits: 09XX">

Hope this will be helping you