4

I would like to achieve the behavior to restrict/limit users entr to only 10 numbers for ex:

Anyone know how to do this?

I do see that they have an attribute md-input-maxlength, but i am not able to get it work, or find an example.

Appreciate your inputs.

user2919905
  • 63
  • 1
  • 7
  • Can you try this answer : [How can you limit the value from input using AngularJS?](http://stackoverflow.com/a/24701328) (Thank you @tymeJV ) . If its works kindly give upvote to it. – sps Aug 29 '16 at 10:01

5 Answers5

2

Extend from John Smith's answer, you can try 

md-search-text-change="searchText = searchText.substring(0,10)"
pcchan
  • 21
  • 4
1

I don't think there is currently an easy way to do it. However, as a hacky workaround you can use md-search-text-change and whenever the value is longer than X, you can just overwrite it with the first X characters of the value.

Example pen here

Keep in mind though, changing the text to a substring of it will cause another call for the text change event.

John Smith
  • 2,291
  • 4
  • 22
  • 33
  • Thanks John, this serves my need. Thanks for your input on this. I hope the md developers can provide this hook in future release. – user2919905 May 14 '16 at 22:52
  • I would suggest to open an issue about it on GitHub. This doesn't seem to be a huge feature, maybe someone from the community would do a PR. – John Smith May 15 '16 at 00:17
0

Combine 'md-maxlength' and 'maxlength' eg. input type="text" md-maxlength="512" maxlength="512"

Sreeragh A R
  • 2,871
  • 3
  • 27
  • 54
  • Actually testing this, it does not work. ng-maxlength, md-maxlength, and maxlength are all ineffective when used on an md-autocomplete control. – Andrew Gray Feb 01 '22 at 20:58
0

Here's the working code:

    <md-autocomplete flex=""
                       required
                       ng-init="searchText=''"
                       md-input-name="autocompleteAddField"
                       md-input-minlength="2"
                       md-input-maxlength="10"
                       md-no-cache="true"
                       md-selected-item="newE.add"
                       md-search-text="searchText"
                       md-items="item in vm.queryAddressSearch(searchText)"
                       md-item-text="item.address"
                       md-require-match=""
                       md-floating-label="Address">
        <md-item-template>
          <span md-highlight-text="searchText">{{item.address}}</span>
        </md-item-template>
        <div ng-messages="newEntityForm.autocompleteAddField.$error" ng-if="newEntityForm.autocompleteAddField.$touched">
          <div ng-message="required">You <b>must</b> have a user address.</div>
          <div ng-message="md-require-match">Please select an existing address.</div>
          <div ng-message="minlength">Your entry is not long enough.</div>
          <div ng-message="maxlength">Your entry is too long.</div>
        </div>
      </md-autocomplete>
user1242321
  • 1,578
  • 2
  • 18
  • 30
  • Actually testing this, it also does not work. md-input-minlength and md-input-maxlength have no effect on an md-autocomplete control. – Andrew Gray Feb 01 '22 at 20:59
-1

You can use ng-maxlength="10". Here is an example. If the user type more than 10 characters then the form will be invalid. You can check this out.

<form name="form">
  <input type="text" ng-model="model" id="input" name="input" ng-maxlength="10" />
  <hr>
  input valid? = <code>{{form.input.$valid}}</code><br>
  model = <code>{{model}}</code>
</form>
Pranab Mitra
  • 401
  • 1
  • 4
  • 9