如何限制输入文本的angular2中的数字范围？

我有一个输入文本字段<代码>

---

我想将输入的值限制在15000到500000之间。我不希望用户在上面输入数字。

您可以使用HTML5 native。这里不需要任何角度2代码。仅用于表单验证。如果用户键入不在范围内的数字或任何无效字符，则表单将无效

---

您可以使用HTML5本机。这里不需要任何角度2代码。仅用于表单验证。如果用户键入不在范围内的数字或任何无效字符，则表单将无效

---

在angular2方式中，您可以使用指令

@Directive({
    selector: '[restrict]',
})
export class InputRestricter{


@Input('restrict_minvalue') minValue: number;
constructor(private el: ElementRef,private renderer: Renderer) {

}    
@HostListener('keyup',['$event']) onKeyUp(event){   
    if(this.minValue){
        let el = <HTMLSelectElement> event.target;
        if ($(el).val() <= this.minValue) {
            el.setCustomValidity('Value is invalid');
        } else {
            el.setCustomValidity('');
        }
    }
}

@指令({
选择器：“[restrict]”，
})
导出类InputRestricter{
@输入（'restrict_minvalue'）minvalue:number；
构造函数（私有el:ElementRef，私有呈现器：呈现器）{
}    
@HostListener（'keyup'，['$event']）onKeyUp（event）{
if（this.minValue）{
设el=event.target；
如果以angular2方式（$（el）.val（），则可以使用指令

@Directive({
    selector: '[restrict]',
})
export class InputRestricter{


@Input('restrict_minvalue') minValue: number;
constructor(private el: ElementRef,private renderer: Renderer) {

}    
@HostListener('keyup',['$event']) onKeyUp(event){   
    if(this.minValue){
        let el = <HTMLSelectElement> event.target;
        if ($(el).val() <= this.minValue) {
            el.setCustomValidity('Value is invalid');
        } else {
            el.setCustomValidity('');
        }
    }
}

@指令({
选择器：“[restrict]”，
})
导出类InputRestricter{
@输入（'restrict_minvalue'）minvalue:number；
构造函数（私有el:ElementRef，私有呈现器：呈现器）{
}    
@HostListener（'keyup'，['$event']）onKeyUp（event）{
if（this.minValue）{
设el=event.target；
如果（$（el）.val（）尝试类似的方法，我已经使用了keyup事件

import {Component, Input} from 'angular2/core';
@Component({
    selector: 'app',
    template: `
    <label>Enter the Amount:</label>
   <input type="text" #textbox [(ngModel)]="textvalue"  (keyup)="restrictNumeric($event, textbox.value, 15000, 500000)" />
    `
})
export class App {
  string: textvalue;
  restrictNumeric(event, value, min, max) 
  {
    if(parseInt(value) < min || isNaN(parseInt(value))) 
        console.log("invalid min value");
    else if(parseInt(value) > max || isNaN(parseInt(value)) 
        this.textvalue = 500000;
  }
}

从'angular2/core'导入{组件，输入}；
@组成部分({
选择器：“应用程序”，
模板：`
输入金额：
`
})
导出类应用程序{
字符串：textvalue；
restrictNumeric（事件、值、最小值、最大值）
{
if（parseInt（value）max | | isNaN（parseInt（value））
this.textvalue=500000；
}
}
试试这样的方法，我已经使用了keyup事件

import {Component, Input} from 'angular2/core';
@Component({
    selector: 'app',
    template: `
    <label>Enter the Amount:</label>
   <input type="text" #textbox [(ngModel)]="textvalue"  (keyup)="restrictNumeric($event, textbox.value, 15000, 500000)" />
    `
})
export class App {
  string: textvalue;
  restrictNumeric(event, value, min, max) 
  {
    if(parseInt(value) < min || isNaN(parseInt(value))) 
        console.log("invalid min value");
    else if(parseInt(value) > max || isNaN(parseInt(value)) 
        this.textvalue = 500000;
  }
}

从'angular2/core'导入{组件，输入}；
@组成部分({
选择器：“应用程序”，
模板：`
输入金额：
`
})
导出类应用程序{
字符串：textvalue；
restrictNumeric（事件、值、最小值、最大值）
{
if（parseInt（value）max | | isNaN（parseInt（value））
this.textvalue=500000；
}
}
我希望数据在运行时自动更改为500000，即使您试图在上面加上一个数字。很抱歉没有完成此问题。@VishalNair，那么您只需设置值$（el）.val（“15000”）不是将其设置为无效。在指令中，您有输入元素，您可以根据需要对其进行管理。我希望在运行时，即使您尝试在其上方添加一个数字，数据也会自动更改为500000。很抱歉，没有完成此问题。@VishalNair，那么您只需设置值$（el）.val（“15000”）而不是将其设置为无效。在指令中，您有输入元素，可以根据需要对其进行管理。使用keypress事件的原因是什么？使用keypress事件的原因是什么？