Angular 限制文本输入值的正确方式（例如，仅限数字）

是否可以实现一个

输入

，只允许在其中键入数字，而不需要手动处理

事件.target.value

在React中，可以定义

值

属性，然后输入更改将基本上绑定到该值（如果没有

值

更改，则无法对其进行修改）。看见不用任何努力，它就可以正常工作

在Angular 2中，可以定义

[value]

，但它只会在开始时设置值，然后

输入

不会被阻止修改

我在玩

ngModel

和

[value]/（input）

，请参阅

但在这两种实施中都存在一个基本问题：

键入10（型号值为10；输入值为10）-正确

之后键入10d时（型号值为10-未修改，所有非数字均已删除；输入值为10d）-不正确，因为型号值与以前相同

当您键入10d3-（型号值为103；输入值为103）-正确

如何在不手动处理

event.target.value

的情况下（乍一看）完成这个简单的组件

更新我不是在这里寻找原生HTML5

input[number]

元素。这里的数字输入只是一个例子——当我需要限制输入文本时，可能会有更多的任务

此外，

input[number]

是1）不限制我键入

10ddd

和2）（不太重要）包含我不需要的箭头

这里的问题是防止用户键入超出限制值的内容，而不是允许输入任何内容，然后进行验证，

我认为定制是最好的选择

未测试，但据我记忆所及，这应该可以：

<input [(ngModel)]="value" pattern="[0-9]">

---

您可以使用数字类型的HTML5输入

它不接受其声明中的任何字符

<input type="number" [(model)]='myvar' min=0 max=100 step=5 />

下面是使用angular 2的示例

[（model）]

---

在component.ts中添加此功能

_keyUp(event: any) {
    const pattern = /[0-9\+\-\ ]/;
    let inputChar = String.fromCharCode(event.key);

    if (!pattern.test(inputChar)) {
      // invalid character, prevent input
      event.preventDefault();
    }
}

在模板中，使用以下命令

<input(keyup)="_keyUp($event)">

这将在angular2捕获事件之前捕获输入。

我测试的答案：

form.html

<input type="text" (keypress)="restrictNumeric($event)">

form.component.ts:

public restrictNumeric(e) {
  let input;
  if (e.metaKey || e.ctrlKey) {
    return true;
  }
  if (e.which === 32) {
   return false;
  }
  if (e.which === 0) {
   return true;
  }
  if (e.which < 33) {
    return true;
  }
  input = String.fromCharCode(e.which);
  return !!/[\d\s]/.test(input);
 }

公共限制数字（e）{
让输入；
if（e.metaKey | | e.ctrlKey）{
返回true；
}
如果（e.which==32）{
返回false；
}
如果（e.which==0）{
返回true；
}
如果（如<33）{
返回true；
}
输入=String.fromCharCode（e.which）；
返回！！/[\d\s]/.test（输入）；
}

inputmask插件在这方面做得最好。它非常灵活，您可以提供任何想要限制输入的正则表达式。它也不需要JQuery

步骤1：安装插件：

npm install --save inputmask

步骤2：创建一个指令来包装输入掩码：

import {Directive, ElementRef, Input} from '@angular/core';
import * as Inputmask from 'inputmask';


@Directive({
  selector: '[app-restrict-input]',
})
export class RestrictInputDirective {

  // map of some of the regex strings I'm using (TODO: add your own)
  private regexMap = {
    integer: '^[0-9]*$',
    float: '^[+-]?([0-9]*[.])?[0-9]+$',
    words: '([A-z]*\\s)*',
    point25: '^\-?[0-9]*(?:\\.25|\\.50|\\.75|)$'
  };

  constructor(private el: ElementRef) {}

  @Input('app-restrict-input')
  public set defineInputType(type: string) {
    Inputmask({regex: this.regexMap[type], placeholder: ''})
      .mask(this.el.nativeElement);
  }

}

步骤3：

<input type="text" app-restrict-input="integer">

查看他们的帐户以了解更多信息。

在HTML中的

字段写入：

（按键）=“onlyNumberKey（$event）”

并在ts文件中写入：

onlyNumberKey(event) {
    return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57;
}

onlyNumberKey（事件）{
return（event.charCode==8 | | event.charCode==0）？null:event.charCode>=48&&event.charCode我认为这将解决您的问题。我创建了一个指令，用于过滤来自用户的输入并限制所需的数字或文本

此解决方案最多适用于Ionic-3和Angular-4用户

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

/**
 * Generated class for the AlphabateInputDirective directive.
 *
 * See https://angular.io/api/core/Directive for more info on Angular
 * Directives.
 */
@Directive({
  selector: '[keyboard-input-handler]' // Attribute selector
})
export class IonicKeyboardInputHandler {

  @Input("type") inputType: string;

  isNumeric: boolean = true;
  str: string = "";
  arr: any = [];  

  constructor(
    public platForm: Platform
  ) {
    console.log('Hello IonicKeyboardInputHandler Directive');
  }


  @HostListener('keyup', ['$event']) onInputStart(e) {   

    this.str = e.target.value + '';

    this.arr = this.str.split('');

    this.isNumeric = this.inputType == "number" ? true : false; 

    if(e.target.value.split('.').length === 2){
      return false;
    }    

    if(this.isNumeric){
      e.target.value = parseInt(this.arr.filter( c => isFinite(c)).join(''));
    }      
    else
      e.target.value = this.arr.filter( c => !isFinite(c)).join('');        

    return true;

  }


}

另一个

<form [formGroup]="myForm" novalidate>
    <input type="text" class="form-control" id="data" name="data"
           formControlName="input3" #item (input)="change(item.value)">
</form>
{{myForm.value |json}}

change(value:string)
  {
    let lastchar = value.substr(value.length - 1);
    if (!(new RegExp('[0-9]').test(lastchar)))
    {
      value=value.substr(0,value.length-1);
      this.myForm.controls["input3"].setValue(value);

    }
  }

看，如何维护光标位置
一些答案对我不起作用，所以我从一些答案中选取了最好的部分（谢谢大家），并创建了一个Angular 5指令，应该可以为您完成这项工作（以及更多）。它可能并不完美，但它提供了灵活性

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

@Directive({
selector: '[appInputMask]'
})
export class InputMaskDirective {
@Input('appInputMask') inputType: string;

showMsg = false;
pattern: RegExp;

private regexMap = { // add your own
integer: /^[0-9 ]*$/g,
float: /^[+-]?([0-9]*[.])?[0-9]+$/g,
words: /([A-z]*\\s)*/g,
point25: /^\-?[0-9]*(?:\\.25|\\.50|\\.75|)$/g,
badBoys: /^[^{}*+£$%\\^-_]+$/g
};

constructor(public el: ElementRef, public renderer: Renderer2) { };

@HostListener('keypress', ['$event']) onInput(e) {
this.pattern = this.regexMap[this.inputType]
const inputChar = e.key;
this.pattern.lastIndex = 0; // dont know why but had to add this

if (this.pattern.test(inputChar)) {
   // success
  this.renderer.setStyle(this.el.nativeElement, 'color', 'green'); 
  this.badBoyAlert('black');
} else {

  this.badBoyAlert('black');
   //do something her to indicate invalid character
  this.renderer.setStyle(this.el.nativeElement, 'color', 'red');
  e.preventDefault();

}

  }
  badBoyAlert(color: string) {
    setTimeout(() => {
      this.showMsg = true;
      this.renderer.setStyle(this.el.nativeElement, 'color', color);
    }, 2000)
  }

  }

HTML


输入文件只接受数字，但它只是临时修复

在html中：

 <input (keypress)="onlyNumber(event)"/>



在组件中：

onlyNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

onlyNumber（evt）{
evt=（evt）？evt:window.event；
var charCode=（evt.which）？evt.which:evt.keyCode；
如果（字符码>31&（字符码<48 | |字符码>57））{
返回false；
}
返回true；
}
经过大量研究，我最终创建了一个完全满足需求的函数。
我创建的函数限制所有特殊字符，只允许字母和数字..并且该函数对这两个字符都很好，要么你复制粘贴，要么都键入。
希望它能起作用：）

公共输入验证程序（事件：任意）{
//日志（event.target.value）；
常量模式=/^[a-zA-Z0-9]*$/；
//让inputChar=String.fromCharCode（event.charCode）
if（！pattern.test（event.target.value））{
event.target.value=event.target.value.replace（/[^a-zA-Z0-9]/g，”）；
//无效字符，禁止输入
}
}

如何使用-

1） 在ts文件的类组件中添加上述方法。

2） 在输入事件上调用方法inputValidator（$event）。下面是使用NgModel的工作解决方案

<input type="text" (keypress)="restrictNumeric($event)">

添加变量

 public Phone:string;

在html中添加

      <input class="input-width" [(ngModel)]="Phone" (keyup)="keyUpEvent($event)" 
      type="text" class="form-control" placeholder="Enter Mobile Number">

要捕获围绕模型更改的所有事件，
可以考虑使用

<input (ngModelChange)="inputFilter($event)"/>

我用这个：


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

@Directive({
    selector: '[ngModel][onlyNumber]',
    host: {
        "(input)": 'onInputChange($event)'
    }
})
export class OnlyNumberDirective {

    @Input() onlyNumber: boolean;
    @Output() ngModelChange: EventEmitter<any> = new EventEmitter()

    constructor(public el: ElementRef) {
    }

    public onInputChange($event){
        if ($event.target.value == '-') {
            return;
        }

        if ($event.target.value && $event.target.value.endsWith('.')) {
            return;
        }

        $event.target.value = this.parseNumber($event.target.value);
        $event.target.dispatchEvent(new Event('input'));
    }

    @HostListener('blur', ['$event'])
    public onBlur(event: Event) {
        if (!this.onlyNumber) {
            return;
        }

        this.el.nativeElement.value = this.parseNumber(this.el.nativeElement.value);
        this.el.nativeElement.dispatchEvent(new Event('input'));
    }

    private parseNumber(input: any): any {
        let trimmed = input.replace(/[^0-9\.-]+/g, '');
        let parsedNumber = parseFloat(trimmed);

        return !isNaN(parsedNumber) ? parsedNumber : '';
    }

}


从“@angular/core”导入{Directive，ElementRef，HostListener，Input，Output，EventEmitter}；
@指示({
选择器：“[ngModel][onlyNumber]”，
主持人:{
“（输入）”：“onInputChange（$event）”中的
}
})
仅导出类编号指令{
@Input（）onlyNumber:布尔值；
@Output（）ngModelChange:EventEmitter=neweventemitter（）
建造商（公共el:ElementRef）{
}
公共onInputChange（$event）{
如果（$event.target.value=='-'）{
返回；
}
如果（$event.target.value&&$event.target.value.endsWith（'.'））{
返回；
}
$event.target.value=此.parseNumber（$event.t
      <input class="input-width" [(ngModel)]="Phone" (keyup)="keyUpEvent($event)" 
      type="text" class="form-control" placeholder="Enter Mobile Number">

   keyUpEvent(event: any) {
    const pattern = /[0-9\+\-\ ]/;  
    let inputChar = String.fromCharCode(event.keyCode);

    if (!pattern.test(inputChar)) {
      // invalid character, prevent input
      if(this.Phone.length>0)
      {
        this.Phone= this.Phone.substr(0,this.Phone.length-1);
      }
    }
  }

<input (ngModelChange)="inputFilter($event)"/>

inputFilter(event: any) {
    const pattern = /[0-9\+\-\ ]/;
    let inputChar = String.fromCharCode(event.charCode);

    if (!pattern.test(inputChar)) {
      // invalid character, prevent input
      event.preventDefault();
    }
}


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

@Directive({
    selector: '[ngModel][onlyNumber]',
    host: {
        "(input)": 'onInputChange($event)'
    }
})
export class OnlyNumberDirective {

    @Input() onlyNumber: boolean;
    @Output() ngModelChange: EventEmitter<any> = new EventEmitter()

    constructor(public el: ElementRef) {
    }

    public onInputChange($event){
        if ($event.target.value == '-') {
            return;
        }

        if ($event.target.value && $event.target.value.endsWith('.')) {
            return;
        }

        $event.target.value = this.parseNumber($event.target.value);
        $event.target.dispatchEvent(new Event('input'));
    }

    @HostListener('blur', ['$event'])
    public onBlur(event: Event) {
        if (!this.onlyNumber) {
            return;
        }

        this.el.nativeElement.value = this.parseNumber(this.el.nativeElement.value);
        this.el.nativeElement.dispatchEvent(new Event('input'));
    }

    private parseNumber(input: any): any {
        let trimmed = input.replace(/[^0-9\.-]+/g, '');
        let parsedNumber = parseFloat(trimmed);

        return !isNaN(parsedNumber) ? parsedNumber : '';
    }

}

<input onlyNumbers="true" ... />