如何在 Angular 中使用 oninput？答案

【问题标题】：how to use oninput in Angular?如何在 Angular 中使用 oninput？
【发布时间】：2019-04-02 17:12:50
【问题描述】：

我想限制输入的最大数量。

data = [
   {
     qq:[30]
   },
   {
     qq:[100]
   }


<div *ngFor="let data of data">

      max{{data.qq[0]}}

      <input type="number" id="test" oninput="if(value > data.qq[0]) value = data.qq[0]">

    </div>

似乎有道理。但有一个错误“数据未定义”

如何解决。

我尝试了ngModel，但效果不是很好。超过最大值后，用户可以继续输入。

https://stackblitz.com/edit/angular-s5uwe6?file=src%2Fapp%2Fapp.component.ts

【问题讨论】：

标签： angular

【解决方案1】：

如果有人仍然感兴趣，你可以使用（输入）

<input type="number" id="test" (input)="yourFunction()">

【讨论】：

【解决方案2】：

只需使用 max 属性

  <input type="number" id="test" [max]="data.qq[0]">

stackblitz demo

类似的另一种方式

  <input type="number" id="test" #v  (change)="+v.value > data.qq[0]? v.value = data.qq[0]:0">

【讨论】：

(ngModelChange)="+v.value > data.qq[0]?v.value = data.qq[0]:0" 这对我有用。谢谢

【解决方案3】：

您可以在 HTML 中使用 keyup 方法并将 $event.target.value 作为输入发送到您所需的方法。

<input (keyup)="filterData($event.target.value)">

filterData(e){
   console.log(e);
}

【讨论】：

【解决方案4】：

您对数组和迭代变量使用相同的变量。
qq[1] 未定义，因为它只有索引 0 的 1 个成员
angular 中没有oninput 事件，使用ngModel
oninput 中的代码无论如何都不起作用
阅读有关表单和验证的教程：https://angular.io/guide/form-validation#template-driven-validation

【讨论】：

为什么 Angular 中没有 oninput？这是有效的 JS :)
我尝试了ngModel，但效果不是很好。超过最大数量后，用户可以继续输入。 stackblitz.com/edit/…