如何限制輸入文本在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中的數字範圍？

回答

相關問題