0

So I have seen a lot of answers but none that fits my case. I cannot use jQuery fyi.

<ng-repeat="stuff in junk">
  <md-input-container>
    <input type="number" ng-model="stuff.value.currentValue" ng-keypress="myController.checkLength(stuff.length)"

This is obviously a very rough mockup of what im doing. Ultimately I am just trying to make a numeric input where i can limit the length and not just have an error telling them too many chars, on submission. Because the model is variable I cannot getelementbyID, cannot use maxlength as its type="number", etc. etc. I'm thoroughly stumped. I would really like to not use a standard input and then do validation on the user input but im out of ideas

B.C.
  • 1
  • 1
  • I don't get it - why you can't use max? http://stackoverflow.com/questions/8354975/how-to-add-maxlength-for-html5-input-type-number-element – llamerr Mar 14 '16 at 14:17
  • `max` attribute of `input` element will work. – nextt1 Mar 14 '16 at 14:25
  • _"I am just trying to make a numeric input where i can limit the length and not just have an error telling them too many chars"_ What is expected value range of `input` element `value` ? How many characters would be "too many" ? – guest271314 Mar 14 '16 at 14:32
  • No max will not work. Max alerts you when youve exceeded the limit, it does not stop further input. The limit is irrelevant but will likely be 4 characters, the range will be from 0-9999. – B.C. Mar 14 '16 at 16:48

2 Answers2

0

You should use the attribute max which should be possible in this case.

<input type="number" max="9000" ng-model="stuff.value.currentValue" ng-keypress="myController.checkLength(stuff.length)" />
Bwaxxlo
  • 1,860
  • 13
  • 18
  • Min and Max only give an error, like I said, I am trying to hard restrict the number of chars allow not just alert the user. – B.C. Mar 14 '16 at 15:06
0

If I understand the question correctly, you're trying to set a hard limit on each input's length as the length of each stuff.value.currentValue (which may be variable) in the ng-repeat. If this is correct, you could try the following:

<input type="number" 
 maxlength="{{::stuff.value.currentValue.length}}"  
 ng-model="stuff.value.currentValue" 
 ng-keypress="myController.checkLength(stuff.length)" />

The :: before the variable name in the binding indicates a one time binding, meaning the value is set after the first digest cycle, and does not change after subsequent digests. This means that as your ng-repeat is looping through the data (say the words 'Peter', 'Paul', and 'Mary'), each input's maximum length will be the length of that original input (in this case, 5, 4, and 4), and will not change when the model is updated. The maxlength attribute will not provide an error message, but will not allow users to enter text that is longer than the original length of each stuff.value.currentValue

lsnare
  • 114
  • 6