#Validation of decimals in input type number

12 messages · Page 1 of 1 (latest)

urban frigate
#

I am (unfortunately for me) working in an Angular 1.6 application and I keep getting the error:

{
  "step": [
    {
      "$viewValue": "327.66",
      "$modelValue": 327.66,
      "$validators": {},
      "$asyncValidators": {},
      "$parsers": [null, null],
      "$formatters": [null],
      "$viewChangeListeners": [],
      "$untouched": true,
      "$touched": false,
      "$pristine": true,
      "$dirty": false,
      "$valid": false,
      "$invalid": true,
      "$error": { "step": true },
      "$name": "",
      "$options": {}
    }
  ]
}

when trying to validate this input with a decimal (for example 399.99)

<input required type="number" class="form-control" min="0.00" step="0.01" max="999999.99" ng-step="0.01" ng-model="$ctrl.item.price.value" ng-pattern="/^\d*([.]{1}\d+)?$/" />

I've tested the regex /^\d*([.]{1}\d+)?$/ on different testing sites, and it should work for any number with an optional decimal value.
I've also changed this to ^1{1}$ just to test that the ng-pattern worked, which it did. It seems that it just doesn't want to validate the decimal pattern.

Anyone got any clue what I am doing wrong with the pattern?

fleet vessel
#

Not a definitive prognosis, but just noticing, that your view value is a string, and your model value is a number

I don’t think regex works on numbers the same way that it does on strings

Could that be the issue? Are you running the pattern on the number or string?

urban frigate
#

I must admit that I am not entirely sure. It is set to model a decimal value, but I am not sure how it's parsed by Angular when coming from the input - even though the input type is number.

fleet vessel
#

Well since the input is of type number, I’m going to assume that’s the type of primitive that’s getting operated on

#

You may have to write a custom validator

#

One that either operates on numbers, or you could reuse you regex, after converting it to a string real quick for validation purposes

urban frigate
#

Onwards to google to find out how I can make custom validators in A1.6 then 😅 Thank you for your help @fleet vessel!

fleet vessel
urban frigate
#

To update you on something even weirder.

I removed min, max and ng-step from the input value. Now when I reload, the input starts out invalid as before, but if I add 0.01 to the value, it is suddenly valid. However, if I decrease with 0.01 (or any amount) then it's invalid o.O

#

If I remove step="0.01" as well, then I don't get any invalidation in $error, but when I try to save it, the browser tells me to enter the nearest whole number instead of the decimal.

fleet vessel
#

Have you considered making it a text field? Instead of a number?

You could easily convert the value before submission in onSubmit

urban frigate
#

Yeah, that is a possibility, just one that I was hoping to avoid xD For the moment this field is not needed, so I just commented it out. However, it's so frustrating not understanding why this is so hard to fix with the pattern 😂