Categories
discuss

Angular 4 input[type=’number’] prevent typing over min/max

I am trying to make a inputNumber directive which will prevent typing (not highlighting the input when value is wrong, but even typing in wrong value): a) letters and symbols, restrict only to [0-9] …

I am trying to make a inputNumber directive which will prevent typing (not highlighting the input when value is wrong, but even typing in wrong value):

a) letters and symbols, restrict only to [0-9] b) respect min and max params c) be in relation with other such directives in the view via greaterOrEqual / lessOrEqual properties.

This is my input-number.directive.ts:

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

@Directive({
    selector: '[inputNumber]'
})
export class InputNumberDirective {

    @Input() min: number = 0; // will be input
    @Input() max: number = 100; // will be input

    @Input() greaterOrEqual: number = 23; // will be input
    @Input() lessOrEqual: number = 77; // will be input

    @HostListener('keypress', ['$event']) sanitizeValue(event: KeyboardEvent): boolean {

        const targetVal: number = Number((<HTMLInputElement>event.target).value);

        if (event.charCode >= 48 && event.charCode < 58) {
            if (this.min !== null && targetVal < this.min) {
                return false;
            }
            if (this.max !== null && targetVal > this.max) {
                return false;
            }
            if (this.greaterOrEqual !== null && targetVal < this.greaterOrEqual) {
                return false;
            }
            return !(this.lessOrEqual !== null && targetVal > this.lessOrEqual);
        }
        return false;
    }
}

This all works in terms of preventing typing letters/symbols, but when it comes to respecting numbers limiters user is still able to type them over and my purpose to prevent this. I found some SO threads (e.g. Don’t allow typing numbers between max and min value) on this, but it didn’t help me a lot.

Answer

This is a directive (Stackblitz)I am sure will help your case, it doesn´t let other input values other than numbers but also it allows CTRL+C, CTRL+V among other usefull keys for inputs.

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

@Directive({
  selector: '[NumericInput]'
})
export class NumericInput {

    constructor(private el: ElementRef) { }

    @Input() latestInputValue: number;

    @HostListener('keydown', ['$event']) onKeyDown(event) {
        let e = <KeyboardEvent> event;

            if (this.latestInputValue < 0 || this.latestInputValue > 100) {
              e.preventDefault();
            } else if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
            // Allow: Ctrl+A
            (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+C
            (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+V
            (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+X
            (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
            // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
              // let it happen, don't do anything
              return;
            }
            // Ensure that it is a number and stop the keypress
            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();
            }
        }
}

HTML

<input NumericInput [latestInputValue]="someValue" [(ngModel)]="someValue" >
Source: stackoverflow
Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to the Privacy Policy, and Copyright Policy. Content is available under CC BY-SA 3.0 unless otherwise noted. The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 © No Copyrights, All Questions are retrived from public domain..