为仅允许编号创建指令

Question

i need to create Number Directive. so commonly implement whole application. input type text allowed keyboard number.

Answer 1

i created following directive file numbers-only.directive.ts

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

@Directive({
    selector: 'input[numbersOnly]'
})
export class NumberDirective {

    constructor(private _el: ElementRef) { }

    @HostListener('input', ['$event']) onInputChange(event) {
        const initalValue = this._el.nativeElement.value;
        this._el.nativeElement.value = initalValue.replace(/[^0-9]*/g, '');
        if (initalValue !== this._el.nativeElement.value) {
            event.stopPropagation();
        }
    }

}

and also i implement this component html file

<input type="text" class="form-control" name="zipcode" formControlName="zipcode" numbersOnly maxlength="5" />

Answer 2

Please refer this Working Demo .