Question

我想将数字输入限制为0-100范围，但是在输入时，而不是在验证期间。我正在使用ngModel来绑定值和发出更改事件：

<input [ngModel]="value" (ngModelChange)="validate($event)" />

然后检查值是否超出给定限制：

public validate(value) {
    if (value > 100)
        this.value = 100;
    if (value < 0)
        this.value = 0;
}

这部分有效。但是，如果我说尝试输入150并且值将切换为100，那么我可以输入超过100的任何值，因为模型值保持为100，因此输入值不会更新。有没有办法手动强制进行此更新？

编辑：我在这里错过了很重要的一点。这种行为似乎只发生在type = number的输入中。文本输入不会超过100.我的解决方法就像Faisal建议使用带有preventDefault的keypress事件一样：

public keyPress(event) {
    let inputChar: number = +String.fromCharCode(event.charCode);
    if (this.value + inputChar > 100 || this.value + inputChar < 0) {
        // Exceeded limits, prevent input
        event.preventDefault();
    }
}

Answer 1

使用正则表达式来限制用户输入。

以下是您输入的html代码：

<input [(ngModel)]="value" 
       (keypress)="keyPress($event)"
       (ngModelChange)="validate($event)"  
        maxlength=3 />

..和打字稿代码：

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

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

validate(value:number) {
    if(value>100) {
        this.value=100;
    }
}

这是一个工作的掠夺者：Plunker DEMO

Answer 2

我遇到了同样的问题，找到了一个我更喜欢的解决方案。正如您所说的，问题在于模型中的值在函数前后是相同的。我所做的是在更改值之前将其称为Angular的更改检测，以便它记录更改。为此，请使用ChangeDetectorRef类并调用其detectChanges方法。

因此，您的功能变为：

public validate(value) {
    this.changeDetector.detectChanges();
    if (value > 100)
        this.value = 100;
    if (value < 0)
        this.value = 0;
}

它运行完美。希望对您有所帮助。

Answer 3

另一种方式......正如我所知，是使用NgZone（相当于AngularJs $scope.$apply()）..喜欢：

constructor(private _ngZone:NgZone){

}


public validate(value){
    if(value>100)
        this.value=100;
    if(value<0)
        this.value=0;

this._ngzone.run(()=>{
 this.value=(value>100) ? 100  ? (value<0) ? 0 : 0;
});

}

Answer 4

您可以添加其他部分以反映更改。

public validate(value){
    if(value>100)
        this.value=100;
    else
        this.value = value    
}

如果值没有改变，如何强制更新ngModel？

4 个答案: