1

This is an HTML5 question but related to Angular.

I've been trying to prevent the input of more than one dot in a field with <input type="number"> inside an Angular form. I've tried:

  • Directive in input element with keypress event to prevent multiple dots.
  • Custom validator to raise an error when more than one dot it's present.

For now, I'm trying to prevent multiple dot/comma input with a directive applied to the input, removing dot/comma when there is already present a dot/comma or when the input value is an invalid number.

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[single-dot]'
})
export class SingleDotDirective {
  private el: HTMLInputElement;

  constructor(private elementRef: ElementRef) {
    this.el = this.elementRef.nativeElement;
  }

  @HostListener('keypress', ['$event'])
  onkeypress(event: KeyboardEvent): void {
    const invalidInput = this.el.validity.badInput;
    const inputCharSeparator =
      String.fromCharCode(event.charCode) === '.' ||
      String.fromCharCode(event.charCode) === ',';
    const alreadyWithSeparator =
      this.el.value.toString().indexOf('.') !== -1 ||
      this.el.value.toString().indexOf(',') !== -1;

    if (inputCharSeparator && (alreadyWithSeparator || invalidInput)) {
      event.preventDefault();
    }
  }
}

But I found a problem, when I try to capture the current input value, the browser returns an empty string when the number is invalid. You can see the reason here: How to get the raw value an <input type="number"> field?

So for example, for a field like:

<input type="number" id="edQuantity">

edQuantity.value will return:

  • "2.1" if input number is 2.1
  • "" if input number is 2.

  • "2.1" if input number is 2,1

  • 2 if input number is 2,

If I check edQuantity.validity.badInput for the last case I'm getting false.

My code can't detect that the value of the input is bad when a comma is present, so you can input values like:

2,.22

So, my questions are:

  1. Why the validation result it's different for ,?
  2. What's the function of comma when present in field?
  3. Any idea to fix my code?

I've tested this in Chrome and Fx.

Thanks!

DavidGG
  • 23
  • 7
  • Avoid input type number, just use text. – Shohel Apr 03 '18 at 15:20
  • 1
    That's a bad approach if you want the number keyboard to show on mobile. – pascalpuetz Apr 03 '18 at 15:22
  • do you need an example of validator for multiple ',' or '.'? What exacly do you mean by "prevent multiple dot (or comma) input"? Make the angular form invalid? – Tomasz Kula Apr 03 '18 at 15:23
  • `type="number"` adds some nice things like @pascalpuetz said, number keyboard on mobiles but also 'add' / 'minus' buttons. – DavidGG Apr 03 '18 at 15:25
  • 1
    Comma is used as decimal operator in some places in Europe, that's why it's still a valid input with comma (,) – Haseeb Jehanzeb Apr 03 '18 at 15:28
  • @TomaszKula I don't want the user to input things like `2........2` or `2,,,,2` these values don't raise exceptions, and when you submit the form, that property is sent with a empty string value "". My goal is to try to minimize these situations allowing only one comma or dot. – DavidGG Apr 03 '18 at 15:31
  • @HaseebJehanzeb yeah, I'm trying to prevent multiple `.` or `,` but comma validation is different from dot validation in HTML5, Why? – DavidGG Apr 03 '18 at 15:32
  • are you using `@angular/forms`? – Tomasz Kula Apr 03 '18 at 15:33
  • @TomaszKula yes, angular forms with validation, I also tried to create a custom validator to detect bad values, but HTML5 `.value` returns an empty string when the value is invalid. – DavidGG Apr 03 '18 at 15:39

0 Answers0