如何在角度2中创建仅允许文本的指令

Question

我创建了以下指令，仅允许使用键控代码输入数字（当我复制文本并将其粘贴到文本框中时，它接受但不接受）

是否可以使用替换和模式来限制数字或文本

angular 4指令（从stackoverflow站点引用）

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


@Directive({
    selector: '[OnlyNumber]'
})

export class InputRestricter {

    constructor(private el: ElementRef) { }

    @Input() OnlyNumber: boolean;

    @HostListener('keydown', ['$event']) onKeyDown(event:any) {
        let e = <KeyboardEvent>event;
        if (this.OnlyNumber) {
            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();
            }
        }
    }
}

我已经使用模式在angularJS中创建了指令并替换

app.directive('test',function(){
return{
    require:'ngModel',
    restrict :'A',
    link:function(scope,elm,attr,ngmodelctrl){
    ngmodelctrl.$parsers.push(function(val){
  //  var clean=val.replace(/^(0*)/,'');
  //var clean =val.replace(/[^0-9\.]/g,'')
  var clean =val.replace(/[^a-zA-Z\.]/g,'')
  ngmodelctrl.$setViewValue(clean);
    ngmodelctrl.$render();
    });
    }
}

})

我想要2个仅允许文本和另一个仅接受数字的指令

Answer 1

如果需要验证输入以仅接受数字或文本，则应使用角度验证，而实际上您需要构建自己的验证。 您会在这里找到一个很好的例子。

https://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html

但是，如果需要强制用户仅输入文本，则需要侦听键并更改输入的事件，然后，一旦输入的值不符合您的要求，您应该编写：

e.preventDefault();
return false;