角4输入[type=‘number’]防止输入超过min/max

Question

我正在尝试创建一个inputNumber指令，以防止输入(在值错误时不突出显示输入，但即使输入错误的值)：

( a)字母和符号，仅限于0-9b)尊重min和max params ( c)通过greaterOrEqual / lessOrEqual属性与视图中的其他此类指令相关联。

这是我的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;
    }
}

所有这些都可以防止输入字母/符号，但是当涉及到尊重数字限制符时，用户仍然能够键入它们，而我的目的是防止这种情况发生。我在这上面找到了一些这样的线程(例如不允许在最大值和最小值之间键入数字)，但它对我没有多大帮助。

Answer 1

这是一个指令(斯塔克布利茨)，我相信它将帮助您的情况，它不允许其他输入值，除了数字，它还允许CTRL+C，CTRL+V和其他有用的输入键。

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" >

Answer 2

您的指令还可以侦听“输入”更改。

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

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

  private el: HTMLInputElement;

  constructor(private elementRef: ElementRef) {
    this.el = this.elementRef.nativeElement;
}
  @HostListener('input',['$event'])onchange(event:any){
    let value=this.el.value;
    let lastchar = value.substr(value.length - 1);
    let bool=lastchar.match(/[0-9]/);
    if (bool){ //if last character match a regExpr
        bool=parseInt(value)>=0 && parseInt(value)<100; //and the condition required
    }
    if (!bool){ //if it does not meet the conditions
        value=value.substr(0,value.length-1);
        this.el.value=value;
        //it's necesary dispatch the event 'input' manually
        let event = new Event('input', { bubbles: true });
        this.el.dispatchEvent(event);
    }
  }

Answer 3

我建议您使用Kendo，这只允许您在它自己的组件上有一个min & max。

<kendo-numerictextbox [value]="value" [min]="0" [max]="100">
</kendo-numerictextbox>