Input Type = Check Number in Angular

Question

I am trying to check the < input type = number > by entering the [number] directive of the ng angular module.

When using type number input with a maximum (or minimum) attribute set to a number, for example

<input type=number min="20" max="40">

it works fine, but my min and max data arrive dynamically using ng-repeat, e.g.

<input type=number min="configRow.valueStart" max="configRow.valueEnd"> then it does not work.

I know that min and max only accept a number, and I'm not very good at writing directives for this. Please help me in any such directory or in any suggestions that will be appreciated.

Answer 1

min and max expect values. So this should work:

 <input type=number min="{{configRow.valueStart}}" max="{{configRow.valueEnd}}"> 

Here is a plunker showing a demo. (this is just a modification of the documentation demonstration).

At the moment, the source of these attributes looks lower. So you can see that a value is expected, which will then be transferred to the float using parseFloat . Therefore, you need to interpolate the model property {{}} by the value.

src / ng / directive / input.js

 if (attr.min) { var minValidator = function(value) { var min = parseFloat(attr.min); return validate(ctrl, 'min', ctrl.$isEmpty(value) || value >= min, value); }; ctrl.$parsers.push(minValidator); ctrl.$formatters.push(minValidator); } if (attr.max) { var maxValidator = function(value) { var max = parseFloat(attr.max); return validate(ctrl, 'max', ctrl.$isEmpty(value) || value <= max, value); }; ctrl.$parsers.push(maxValidator); ctrl.$formatters.push(maxValidator); } 

Answer 2

The maximum length will not work with <input type="number" , the best way I know is to use the oninput event to limit the maxlength, its general solution works with the whole Javascript infrastructure. See below code.

 <input name="somename" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type = "number" maxlength = "6" />T