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

How Vue3 enables components to share props

The command "npm run build" is not running successfully, likely due to npm not being able to interpret ES6 syntax

Breaking down objects and setting default values

The Less compiler (lessc) encounters an issue on a fresh operating system. ([TypeError: undefined is not a function])

I'm working on a project that involves the FCC API, but I'm struggling to grasp the flow of the code

Issue with ISO-8859-1 character encoding in table formatting

Tapping into the space outside the MUI Modal Component in a React application

Could anyone provide recommendations on how to globally declare jQuery in a Vue-CLI 3 project?

Typescript extra property specifications

Tips for executing gulp tasks in the command line

How to align scrolling images with their scroll origin - a step by step guide

What is the best way to incorporate intervals and polling in Angular 2 for seamless integration with Protractor?

looping through a linked data object with ng-repeat

Uploading images with Angular, Node.js, and MySQL

Error: There was a syntax issue when trying to parse JSON due to an unexpected identifier "object" in the anonymous function

Having trouble loading the DOM element within the child component

Passing a JSON object as a parameter in a dynamically created element's click event using JavaScript/AngularJS

Preventing Canvas Image Disappearance with JavaScript's onload Event

"When trying to access a jQuery ID, it is coming back as undefined even though the

Experiencing issues with transferring JSON response from Axios to a data object causing errors