6

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

2 Answers2

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

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
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])]         
          ]
Mustafa Kunwa
  • 821
  • 1
  • 9
  • 19