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

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

If you are working with Angular 8 and want to call a keyup function on a textbox for every dynamically generated form, you can achieve this using Angular's event binding and template reference variables.

Step 1: Define a template reference variable for the textbox element

In your component HTML file, define a template reference variable for the textbox element. This will allow you to reference the element in your component class.

<input #myInput type="text">

Step 2: Bind the keyup event to a function in your component class

In your component class, define a function that will be called on the keyup event. This function should take the textbox value as an input parameter.

onKeyUp(value: string) {
  // do something with the value
}

Next, use Angular's event binding to bind the keyup event of the textbox element to the onKeyUp function in your component class.

<input #myInput type="text" (keyup)="onKeyUp(myInput.value)">

Step 3: Generate the dynamic form and repeat the textbox element

Now, generate your dynamic form and repeat the textbox element for each form field. Make sure to use the same template reference variable (#myInput) for each textbox element so that the event binding and function call work correctly.

<div *ngFor="let field of fields">
  <input #myInput type="text" (keyup)="onKeyUp(myInput.value)">
</div>

That's it! Now the onKeyUp function will be called for every textbox element in your dynamically generated form.

Alternative approach: Use Angular's Reactive Forms

If you are working with a more complex dynamic form, it may be beneficial to use Angular's Reactive Forms instead of manually generating the form fields. With Reactive Forms, you can easily add and remove form fields dynamically and handle form validation.

To use Reactive Forms, you will need to import the ReactiveFormsModule in your component module and define a FormGroup in your component class.

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [ReactiveFormsModule]
})
export class MyModule {}

@Component({
  template: `
    <form [formGroup]="myForm">
      <div formArrayName="fields">
        <div *ngFor="let field of myForm.get('fields').controls; let i=index" [formGroupName]="i">
          <input type="text" formControlName="value" (keyup)="onKeyUp(field.value)">
        </div>
      </div>
    </form>
  `
})
export class MyComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      fields: this.fb.array([])
    });
  }

  addField() {
    const field = this.fb.group({
      value: ''
    });
    this.fields.push(field);
  }

  onKeyUp(value: string) {
    // do something with the value
  }
}

With Reactive Forms, you can add and remove form fields dynamically using Angular's FormArray and FormGroup classes. The onKeyUp function is bound to the keyup event of each textbox element and takes the field value as an input parameter.

Using Reactive Forms can be a more scalable and maintainable approach for handling complex dynamic forms in Angular 8.