Angular 8 : Make FormBuilder Accept Numbers Only with Range for Latitude and Longitude

Question

How do I get FormBuilder to require numbers?

I am writing a Formbuilder for Latitude and Longitude. In this below,

Writing -91 or 91 will give Validation errors, working as expected
Anything between -90 and 90 works which is good.
It accepts numbers up to 32 digits and decimal points, also working

Problem:

However typing in Letters 'Abcd' etc, does Not give validation errors.

How can this be resolved?

  'latitude': [null, [Validators.maxLength(32), Validators.min(-90), Validators.max(90)]],

Prefer to have validation in form, rather than input textbox type=number if possible,

Doesn't come out of the box, but you could write a [custom validator](https://angular.io/guide/form-validation#custom-validators). FYI, scalable form validation is HARD - I highly recommend [yup](https://github.com/jquense/yup) — Adam Jenkins, Dec 24 '19 at 02:33
hi @Adam wow , so min and max come out of box, but not number validation? thanks — , Dec 24 '19 at 02:33
Side Note: It might be worth opening a GitHub issue with the angular team. Min/Max should infer that a number is required. Any non-number should make the validator fail. Sounds like a bug. But, as Muhammed mentioned, setting `type="number"` would prevent users from entering text. — mwilson, Dec 24 '19 at 02:39
use [ng2-validation](https://github.com/yuyang041060120/ng2-validation) for simple validation — Mustafa Kunwa, Dec 24 '19 at 04:10

score 7 · Accepted Answer · edited Dec 24 '19 at 09:41

7

you can use input type number this will block any letters

<input type="number" formControlName="latitude" />

another option to use Validators.pattern to allow only number this will set the control to invalid if you have entered invalid characters.

   latitude: [
        null,
        [
          Validators.maxLength(32),
          Validators.min(-90),
          Validators.max(90),
          Validators.pattern(/\-?\d*\.?\d{1,2}/)
        ]
      ]

demo

edited Dec 24 '19 at 09:41

answered Dec 24 '19 at 02:34

Muhammed Albarmavi

23,240
8
66
91

like this for the integer number `Validators.pattern(`^[0-9]*$`)` – Muhammed Albarmavi Dec 24 '19 at 02:40
They don't have a validator for numbers (https://angular.io/api/forms/Validators). Use the `pattern` validator and provide the proper regex (^ Muhammed mentioned it above) – mwilson Dec 24 '19 at 02:41
@MattSmith74 check this answer https://stackoverflow.com/questions/12117024/decimal-number-regular-expression-where-digit-after-decimal-is-optional/12117060 – Muhammed Albarmavi Dec 24 '19 at 02:45
I have update the answer can be more helpful and include a demo – Muhammed Albarmavi Dec 24 '19 at 02:50
hi Muhammed, just remember needs to work with negative answers, I'm applying this /\-?\d*\.?\d{1,2}/ – Dec 24 '19 at 04:27
You just need to include the - character in front check this answer https://stackoverflow.com/questions/15814592/how-do-i-include-negative-decimal-numbers-in-this-regular-expression – Muhammed Albarmavi Dec 24 '19 at 05:45

Mustafa Kunwa · Answer 2 · 2019-12-24T04:18:44.623

0

You can also do it with ng2-validation library

import { CustomValidators } from 'ng2-validation';

range

new FormControl('', CustomValidators.range([10, 20]))

digits

 new FormControl('', CustomValidators.digits)

Use it as

latitude: [null,
           [CustomValidators.digits,CustomValidators.range([-90, 90])]         
          ]

edited Dec 24 '19 at 04:18

answered Dec 24 '19 at 04:13

Mustafa Kunwa

821
1
9
19

we are using Angular 8, but will try this – Dec 24 '19 at 04:19
You can use it with Angular 8, I'm using it in my Angular 6 project – Mustafa Kunwa Dec 24 '19 at 04:19

Angular 8 : Make FormBuilder Accept Numbers Only with Range for Latitude and Longitude

2 Answers2