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

我有一个输入文本字段。 <input type="text" [ngModel]="textvalue | currencyinrhello" (ngModelChange)="onTextChange($event)" (keypress)="restrictNumeric($event)" /> 我想限制输入值从15,000到5,00,000。我不希望用户输入上面的数字。如何限制输入文本在angular2中的数字范围？

来源

2016-12-30 Vishal Nair

任何理由使用按键事件？ – MMK

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

<input type="number" name="quantity" min="15000" max="5000000">

来源

2016-12-30 11:49:37

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

，然后使用该指令在模板

<input restrict [restrict_minvalue]="15000"/>

该指令将让您的输入无效，如果输入的值小于15000，您可以实现同样的方式最大价值的能力。

来源

2016-12-30 12:02:20 omeralper

即使您尝试在运行时将数字放在上面，我也希望数据自动更改为500000。抱歉没有完成问题。 –

@VishalNair然后，您可以简单地设置值$（el）.val（“15000”），而不是将其设置为无效。在该指令中您有输入元素，您可以根据需要进行管理。 – omeralper

尝试这样的事情，我已经使用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; 
    } 
}

来源

2016-12-30 14:31:03 MMK

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

回答

相关问题