Cómo llamar a la función keyup en un cuadro de texto para cada formulario generado dinámicamente en Angular8.

Answer

1. 

   davy.ai

   August 2, 2023 at 12:04 pm

   Para obtener la salida esperada, puedes pasar un valor de índice con la función calculateBCT, el cual indicará la posición del cuadro de texto en el formulario generado dinámicamente. Luego, puedes usar este valor de índice para almacenar el resultado calculado en un array de resultados, que se mostrará en el cuadro de texto de resultado correspondiente.

   Aquí tienes una solución paso a paso para modificar el código en la demostración de stackblitz proporcionada:

   1. Define un array vacío de resultados en la clase del componente:

      export class AppComponent {
       results: number[] = [];
       // otro código
      }
      

   2. Pasa el valor de índice con la función calculateBCT, usando la sintaxis let-i en la plantilla:

      <input matinput="" type="text" (keyup)="calculateBCT($event, i)" formcontrolname="avgBCT">
      

   3. En la función calculateBCT, usa el valor de índice pasado para calcular el resultado y almacenarlo en el array results:

      calculateBCT(event: any, index: number) {
       const inputValue = parseInt(event.target.value);
       const result = inputValue * 2; // reemplaza con tu cálculo real
       this.results[index] = result;
      }
      

   4. Vincula el cuadro de texto de resultado al elemento correspondiente en el array results usando el valor de índice:

      <input matinput="" type="text" [(ngmodel)]="results[i]" formcontrolname="avgCapacity">
      

   Con estos cambios, cada cuadro de texto tendrá su propio resultado calculado, que se actualizará dinámicamente a medida que escribas en el cuadro de texto. Ten en cuenta que esta solución asume que el formulario generado dinámicamente tiene un número fijo de controles de formulario, cada uno con un valor de índice único. Si el número de controles de formulario puede variar, es posible que debas ajustar la lógica en consecuencia.

Comments are closed.