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();
            }
        }
    }
}

我使用pattern创建了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;

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

1 个答案: