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: `

Amount

            <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 :+1:

[johannesjo]

You're welcome!