Angular Validator check if input is number

Question

I'm trying to perfom form validation in Angular 9 to check if the value of a certain input is a number (integer or decimal).

I therefore created the following custom validator:

import { AbstractControl, ValidationErrors } from '@angular/forms';

export class NumberValidator {
    static number(control: AbstractControl): ValidationErrors | null {
        if (typeof +control.value === "number") return null;
        return { notANumber: "The value is not a number"};
    };
}

It works fine for an integer or decimal input, telling my that it's valid, however it also tells me that the following string value for example "foo" is valid.

How can I fix that?

+ makes string as NaN which type of is number remove it

Cagri Tacyildiz
– Cagri Tacyildiz

2020-05-17 10:32:51 +00:00
Commented May 17, 2020 at 10:32 — Cagri Tacyildiz
– Cagri Tacyildiz, Commented May 17, 2020 at 10:32

Cagri Tacyildiz · Accepted Answer · 2020-05-17 10:37:40Z

5

+ makes string as NaN which type of is number remove it. or if u have to check one more plus of number then

 if (typeof +control.value === "number" && !isNaN(+control.value)) return null;

answered May 17, 2020 at 10:37

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kompaniietst · Accepted Answer · 2020-05-17 10:41:29Z

1

"+" convert variable to number ( +control.value )

So in your example you convert control.value to the number, and then check if this variable is a number. In this way it will be always a number

You need to check:

if Number(control.value) == NaN 
// returns true if control.value is string
// else returns parsed number

edited May 17, 2020 at 10:41

answered May 17, 2020 at 10:31

kompaniietst

2503 silver badges10 bronze badges

Comments

AGoranov · Accepted Answer · 2020-05-17 10:21:36Z

0

First of all, the problem comes from the fact that JavaScript returns the type of NaN to be number. So maybe add additional check if the input is also not equal to NaN.

answered May 17, 2020 at 10:21

AGoranov

2,2443 gold badges17 silver badges30 bronze badges

Comments

Marc · Accepted Answer · 2020-05-17 10:32:52Z

0

If the user changes the value in the input, the value becomes a string like "123". This is a string but (in your case) it should be valid. So you have to check if this is parsable.

Better: you can set the input type from text to number

<input type="number" ...

Then it's always a number. in addition: you can set the built-in validators min an max: https://angular.io/api/forms/Validators

answered May 17, 2020 at 10:32

Marc

1,8861 gold badge11 silver badges16 bronze badges

Comments

S. Kuiter · Accepted Answer · 2021-03-05 10:36:56Z

0

Drawback is that you cannot use type="number" you need to use type="text" on the input but. But here is my solution as ValidatorFn:

function notANumber(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const value = control.value
    let nV = value
    if (typeof value == 'string') {
      nV = value.replace(',', '.')
    }
    return (Number.isNaN(Number(nV)) && !control.pristine) ? {notANumber: true} : null;
  };
}

edited Mar 5, 2021 at 10:36

answered Mar 5, 2021 at 9:50

S. Kuiter

999 bronze badges

Collectives™ on Stack Overflow

Angular Validator check if input is number

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related