javascript - TypeScript - 数字更大还是更小验证仅当数字具有相同的 'length' 时才会响应

Question

目前正在进行数字验证。我有 2 个输入，一个数字不能大于另一个数字，另一个数字不能小于第一个数字。 在输入字段中使用箭头，效果很好，但用户可以手动输入无效数字，我的目标是将该数字恢复为有效数字。

例如，from 不能大于 to，如果我添加 'to' 6 和 'from' 8，'from' 数字将恢复为有效数字 6。但是如果我向 'from 添加另一个数字'，所以 'to' 是 6，'from' 是 '85'，什么都不会改变，它会注册更改，但不会将其恢复为有效数字。

如果数字具有相同的“长度”，例如 60 和 80、500 和 952，那么它将正常工作。但是当它是5和80，或者20和965时，验证就会失败。

这是我的 HTML 和 TS

numberFrom: number;
  numberTo: number;

  ngOnNumberChange(event) {
    let to = this.numberTo;
    let from = this.numberFrom;

    if (from < 0) {
      this.numberFrom = from = 0;
    } else if (to < 0) {
      this.numberTo = to = 0;
    }
    if (this.numberFrom > this.numberTo) {
      this.numberFrom = this.numberTo
    }

    if (this.numberTo < this.numberFrom) {
      this.numberTo = this.numberFrom;
    }

  }

<input [(ngModel)]="numberFrom" (ngModelChange)="ngOnNumberChange($event)" type="number" [max]="numberTo" [min]="0" [placeholder]="'From'">

<input [min]="numberFrom || 0" [(ngModel)]="numberTo" (ngModelChange)="ngOnNumberChange($event)" type="number" [placeholder]="'To'">

这是 StackBlitz 中的内容。 enter link description here

Answer 1

输入的值始终是字符串，您需要先将其转换为数字，然后再进行检查。

您可以使用 parseInt 或 + 来做到这一点:

let to = parseInt(this.numberTo, 10);
let from = parseInt(this.numberFrom, 10);
// OR
let to = +this.numberTo;
let from = +this.numberFrom;