TypeScript - 数字更大或更小验证仅在数字具有相同“长度”时响应答案

【问题标题】：TypeScript - Is number bigger or smaller validation responds only when numbers have same 'length'TypeScript - 数字更大或更小验证仅在数字具有相同“长度”时响应
【发布时间】：2018-10-31 22:28:22
【问题描述】：

目前正在处理号码验证。我有 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

【问题讨论】：

这与执行顺序有关，并且 Angular 会更新屏幕上的输入字段。交换两个 if 语句检查周围的大小（或在其中添加一些调试），你就会明白我的意思了。更新from 输入会触发第一个if 语句，这会导致第二个if 语句跳过（正确），但不会更新UI。（看起来onChange 事件仍在进行中？）
你是对的。必须在“if”检查之前添加一个小超时，所以现在它工作正常。谢谢

标签： javascript validation numbers max min

【解决方案1】：

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

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

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

【讨论】：