角度8数字输入最小/最大
我有一个Angular 8应用程序。我想做的是不让用户在数字输入中设置任何其他值，而不是从0到100的范围
我在想像这样的事情
<input type="number" [ngModel]="value" (ngModelChange)="validateValue($event)">和
value = 100;
validateValue(event: number) {
if (event > 100) {
this.value = 100;
} else if (event < 0) {
this.value = 0;
} else {
this.value = event;
}
}当有一个100，我删除最后一个数字并写5(所以现在我应该有105)，它就会变魔术，把值改成100。
当我用光标选择整数并写出例如105的时候，它也会变魔术。
然而。当我使用步进箭头，或者光标选择最后一个数字并更改最后一个数字时，魔术并没有发生。
为什么这不起作用？
回答 3
Stack Overflow用户
发布于 2020-01-21 11:51:16
您可以尝试这样做：
public value;
validateWhite(event: number) {
if (event > 100) {
this.value = 100;
} else if (event < 0) {
this.value = 0;
} else {
this.value = event;
}
}在模板中：
<input type="number" [(ngModel)]="value" (ngModelChange)="validateWhite($event)">它对我来说效果很好:)
Stack Overflow用户
发布于 2020-06-29 22:16:26
我自己也遇到了这个问题。正如您所发现的，Angular似乎并不关注在数字输入上设置的max/min属性。只有微调器按钮(实际上是由浏览器直接管理，而不是Angular)会注意到这些。在传统的HTML/JavaScript中，字段边界之外的类型化值被认为是“未定义的”；在Angular中，它接受类型化的值。
这个变通方法应该能达到您想要的效果；如果您(或任何阅读本文的人)希望将一个超出范围的值设置为“undefined”，请删除setTimeout()调用。
public realValue : number;
public min : number = 0;
public max : number = 100;
get value() : number {
return this.realValue;
}
set value(newValue : number) {
this.realValue = newValue;
if(this.realValue < this.min){
this.realValue = undefined;
setTimeout(() => {this.realValue = this.min;});
}
else if(this.realValue > this.max){
this.realValue = undefined;
setTimeout(() => {this.realValue = this.max;});
}
}<input type="number" [(ngModel)]="value" [min]="min" [max]="max" (ngModelChange)="changeCallback()" />
使用getter和setter创建伪属性时，将通过您的自定义逻辑来路由Angular的ngModel绑定，从而确保无论如何设置，该值都将始终保持在您的范围内。不幸的是，似乎有必要短暂地将值设置为“未定义”；由于某些原因，当我只是将realValue直接设置为最小或最大值时，Angular并没有更新字段中显示的值。将其设置为undefined，然后使用setTimeout设置所需的值，似乎会强制进行更新，尽管结果会出现奇怪的闪烁行为。
Stack Overflow用户
发布于 2020-01-21 04:51:27
尝试使用最小和最大属性。
<input type="number" min="1" max="5">这不会让步骤箭头允许的数量超过
https://stackoverflow.com/questions/59830340
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号