如何在评估输入字段之前等待

Question

我有一个产品字段，它的数量取决于另一个产品的数量（不能小于 70% 或大于 100%）。 问题是，它的评估非常快，如果主字段是“100”，我不能在另一个字段上输入 75，因为我首先需要输入“7”，我的代码认为它小于 70% 并立即更改它达到 70% 的值。

我已经尝试使用自制的“睡眠”功能，这使得承诺需要一些时间来解决。 由于某种原因，setInterval 和 setTimeout 也无法按我的意图工作（仅在我按 Enter 时评估相关字段，而不是在稳定时间之后）。 这与表格的其余部分不一致，因此不是合适的解决方案。

这是控制此输入的角度位

<div class="input-field">
    <input class="input" type="number" [integerInput]  ="true"
    [disabled]       ="item.deshabilitado( ) || !editable" 
    [(ngModel)]     ="item.cantidad"
    [ngModelOptions]="{standalone: true}"
    (keyup) ="setCantidad( item, $event.target.value )"
    max="9999" min="1" value="1"  >
</div>

可悲的是，我无法得到一个最小且有效的示例。 我需要依赖字段能够自动评估其值（无需按 Enter 键或单击另一个字段），而无需在我仅按一个字符时自动更正我的输入。

Answer 1

使用blur()方法而不是keyup() 。 我猜您正在使用keyup()验证输入，并且每次输入值时都会进行验证。 例如，您尝试输入 70，但是当您输入第一个字符时，7 无效。 当您完成输入值时， blur()会触发您的方法并验证您的输入。

<div class="input-field">
    <input class="input" type="number" [integerInput]="true"
    [disabled]="item.deshabilitado( ) || !editable" 
    [(ngModel)]="item.cantidad"
    [ngModelOptions]="{standalone: true}"
    (focusout)="setCantidad( item, $event.target.value )"
    max="9999" min="1" value="1"  >
</div>

此外，如果用户完成输入值并按下回车keyup.enter ，您可以使用keyup.enter 。 当按下回车键或单击其他地方时，该值会更新。

Answer 2

更新：

我能够解决这个问题并让它像我一开始打算的那样工作。 我试图验证的字段的结果代码是

debounce (afterValueChanged)="setCantidad( item )"

它的行为方式不需要我在字段外单击即可开始验证，而不是 (blur) 或 (focusout)

Answer 3

在您尝试输入 75 的另一个字段中，您可以添加一个 ngModelOptions 配置以仅更新blur 。

[ngModelOptions]="{ updateOn: 'blur' }"

默认情况下，它会在“更改”时更新，这解释了当前的行为。

更新

您还可以使用 RXJS 对输入进行去抖动。 这可能更接近于您尝试使用 setInterval / setTimeout 执行的操作。 这也是 Reactive Forms 真正胜过 Template Driven Forms imo 的一个用例，因为您需要使用 RXJS 运算符。

对于反应驱动的表单，您只需在订阅formControl的 valueChanges 可观察对象之前通过管道传输操作符

this.myInput.valueChanges
  .pipe(
    debounceTime(1000),      // add 1 second of delay
    distinctUntilChanged()   // optional but recommended - only trigger for new values
  )
  .subscribe(val=> {
    console.log('value', val);
  });

可以在模板驱动的表单中完成相同的行为，但需要进行一些设置。 看到这个问题/答案

Answer 4

尝试使用去抖动功能

从 rxjs 导入 debounceTime 并使用它来添加一些延迟 :)

看看这个例子

Answer 5

根据给出的信息，您可能希望对函数调用进行去抖动。

去抖动函数在调用时不执行，它们在执行前等待调用暂停超过可配置的持续时间； 每次新调用都会重新启动计时器。

<div class="input-field">
    <input class="input" type="number" [integerInput]  ="true"
    [disabled]       ="item.deshabilitado( ) || !editable" 
    [ngModel]     ="item.cantidad"
    [ngModelOptions]="{standalone: true}"
    (keyup) ="setCantidad( item, $event.target.value )"
    max="9999" min="1" value="1"  >
</div>

在您的组件类中：

  timer;
  setCantidad(item,value){
    if(this.timer){
      clearTimeout(this.timer);
    }
    this.timer = setTimeout(() => {
      this.item.cantidad = value;
      //perform any operations here

      console.log(item, value);
    },1000);

  }

这将等待用户在指定的超时时间后停止输入并执行操作。

注意：一个额外的变化，如果你想在你输入的同一个输入字段中呈现值，请考虑更改 [(ngModel)] -> [ngModel]。 这将只执行属性绑定而不是事件绑定。

演示 stackblitz 链接： https ://stackblitz.com/edit/angular-cu9gss