如何在 Angular 8 中为每个动态生成的表单调用文本框上的 keyup 函数

Question

我正在动态生成表单，在文本框上，我正在绑定 calculateBCT 函数，如下所示 <input matInput type="text" (keyup)="calculateBCT($event)" formControlName="avgBCT"> 并使用 ngModel 在下面的文本框中返回结果。

<input matInput type="text" [(ngModel)]="calculatedResult" formControlName="avgCapacity">.

预期输出 - 如果我将在 Textbox0 中输入值，它将调用 calculateBCT 函数 并仅在 Result0 文本框 中反映结果，当我在 Textbox1 中输入值时，它将调用 calculateBCT 函数 并在 Result1 文本框 中同样反映结果..

任何人都可以帮助我获得预期的输出

Here i have created stackblitz demo with code

Answer 1

试试这个，看看是否有帮助。

在 app.component.html 中，进行以下更改：

删除 [(ngModel)]="calculatedResult"，因为您已经在使用 formControlName
传递索引 i 以计算 BCT 为 (keyup)="calculateBCT($event, i)"

在app.component.ts中修改calculateBCT方法为：

    calculateBCT($event, index: number) {
      // Your existing logic goes here...
      const calculatedResult = result ? result : 0;
      // In below code, please put some checks to ensure that formControl does exist
      const formControl = this.itemTypes().at(index).get('avgCapacity');
      formControl.setValue(calculatedResult);
    }

编辑：

因为您已经在 html 文件中提供了 formGroup，您可以简单地将 lineItem 作为第二个参数传递给 calculateBCT 并作为 const formControl = lineItem.get('avgCapacity');[=18= 访问 formControl ]

如何在 Angular 8 中为每个动态生成的表单调用文本框上的 keyup 函数

How to call keyup function on textbox for every dynamic generated form in Angular8

javascript

angular

angularjs

typescript

angular8