Input[number] ng-pattern validation overrides the ng-maxlength validation

[krupak]

I have a input[number] field with ng-maxlength and ng-pattern set on it. The input structure is as follows:
<div class="form-group"> <label class="control-label">Amount </label> <input type="number" class="form-control" placeholder="Amount" ng-maxlength="10" required ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" validation-msg-pattern="Field with 2 decimals allowed" ng-model="formData.amount"> </div>

Here, if I input more than 10 characters it validates the ng-maxlength validation but then further if I increases the characters it gets overrides with the ng-pattern validation.

Please help

[johannesjo]

The problem being most likely that the number input is still buggy in multiple browsers. Thanks for reporting though. I will look into this.

[johannesjo]

Check out this plunkr:
http://plnkr.co/edit/NQzCas?p=preview
When you assign the value from the controller:

$scope.formData={
          amount: 1234567890123456789012.34
};

It gets converted to 1.2345678901234568e+21

That might be why the max-length acts weird at some point (and so does the pattern check).

I don't have a indepth explanation, but would be happy to understand it better.

[krupak]

Ok Thanks @johannesjo for the explanation. But how can we avoid this to work as required. Can you give some suggestion to solve this issue of number getting converted into decimals.

[johannesjo]

You have 3 options:

1. Use an input[type=text] and build the logic yourself
2. Trust your users to not enter such ridiculus numbers
3. Try using min and max instead

If you're still unsure, I recommend going to Stackoverflow. Your problem is really beyond the scope of this repo.

[krupak]

Thanks for the suggestions 👍

[johannesjo]

You're welcome!