Ways to trigger the keyup function on a textbox for each dynamically generated form in Angular8

Question

Ways to trigger the keyup function on a textbox for each dynamically generated form in Angular8

When dynamically generating a form, I bind the calculateBCT function to a textbox like this:

<input matInput type="text" (keyup)="calculateBCT($event)" formControlName="avgBCT">

, and display the result in another textbox using ngModel below.

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

The expected output: When a value is entered in Textbox0, the calculateBCT function should be called and the result should reflect in Result0 textbox only. The same goes for Textbox1 calling calculateBCT and Result1 being updated accordingly, and so on.

If anyone can help me achieve this expected output, it would be greatly appreciated.

Here is a demo on StackBlitz with the code provided

javascript angular angularjs typescript angular8

Answer 1

Answer №1

Give this a try and see if it makes a difference.

To make changes in app.component.html, follow these steps:

Remove the line
```
[(ngModel)]="calculatedResult"
```
since you are already using formControlName
Pass index i to calculateBCT by adding
```
(keyup)="calculateBCT($event, i)"
```

In app.component.ts, update the calculateBCT method as shown below:

    calculateBCT($event, index: number) {
      // Your current logic remains unchanged...
      const calculatedResult = result ? result : 0;
      // Make sure to add checks to confirm that formControl exists
      const formControl = this.itemTypes().at(index).get('avgCapacity');
      formControl.setValue(calculatedResult);
    }

Note:

If you have formGroup in your html file, simply pass lineItem as the second parameter to calculateBCT and access formControl like so:

const formControl = lineItem.get('avgCapacity');

Answer 2

Give this a try and see if it makes a difference.

To make changes in app.component.html, follow these steps:

Remove the line
```
[(ngModel)]="calculatedResult"
```
since you are already using formControlName
Pass index i to calculateBCT by adding
```
(keyup)="calculateBCT($event, i)"
```

In app.component.ts, update the calculateBCT method as shown below:

    calculateBCT($event, index: number) {
      // Your current logic remains unchanged...
      const calculatedResult = result ? result : 0;
      // Make sure to add checks to confirm that formControl exists
      const formControl = this.itemTypes().at(index).get('avgCapacity');
      formControl.setValue(calculatedResult);
    }

Note:

If you have formGroup in your html file, simply pass lineItem as the second parameter to calculateBCT and access formControl like so:

const formControl = lineItem.get('avgCapacity');

Ways to trigger the keyup function on a textbox for each dynamically generated form in Angular8

Answer №1

Similar questions

Toggle the input box by clicking the button

Select a user at random from the reactions in the message

Struggling with replacing text in an array using Javascript (Angular)

File or directory does not exist: ENOENT error occurred while trying to scan 'pages'

Struggling to spot my error (codewars, javascript, level 8)

Maximizing the power of Webpack alongside Google Maps API

Execute a function once an observable variable has been successfully initialized

Attempting to alter an image with a click and then revert it back to its original state

Issue with MomentJS inBetween function consistently displaying incorrect results

How should the Facebook avatar be displayed using AngularFire in a correct manner?

Is it possible for a table row's cell to determine the value of the cell in the row above it?

Upgrading from Angular 4 to 9

Elements of Data Pagination in Vuetify Data Tables

Tips for creating Junit tests for a CDK environment

The functionality of Angular Custom Validation using Directive is experiencing issues within the ng-change event

On mobile devices, the height of the absolutely positioned element is larger than its

"Discrepancy found in results between Node-Fetch POST and Firefox POST requests

What is the best way to merge various scope models in Angular?

What is the best way to spin a div HTML layer?

Struggling to make dynamically created SVG 'use' elements function properly