Question

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

Answer 1

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

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

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

然后在模板中使用该指令

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

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

Answer 3

尝试类似这样的事情，我使用过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数字范围？

3 个答案: