Is there a way to focus on a dynamically created form on Angular 4/Ionic3?

Issue

I have a page with dynamically created forms like this:

The blank spaces are inputs and the entire row is a button. Is there a way to click on the button, i.e. the entire row, and select/focus on the correspondent input? Keep in mind that the number of inputs is determined by the user and there can be up to 300 rows like these on the page.

home.ts

export class HomePage {

      public homeForm: FormGroup;
      
      constructor(
        public navCtrl: NavController,
        public userData: UserDataProvider,
        private formBuilder: FormBuilder,
        public renderer: Renderer,
        public elementRef: ElementRef
      ) {

        this.homeForm = new FormGroup({
          bicos: new FormArray([
            new FormControl(null)
          ])
      });

       addInputs() {
          (<FormArray>this.homeForm.controls['bicos'])
          .push(new FormControl(null));
    }
}

home.html:

<form [formGroup]="homeForm"> 
    <ion-row formArrayName="bicos" *ngFor="let item of homeForm.controls.bicos.controls; let i = index" >
        <button id={{i}} ion-button clear style="color: black" class='hidden-button' (click) = "doSomething()">
    <ion-col align-self-center col-2>{{i+1}}</ion-col>
         <ion-col text-center align-self-center col-5>
           <ion-input type="text"></ion-input>
         </ion-col>
             <ion-col align-self-center col-5>400</ion-col>
         </button>
    </ion-row>
</form>

I have already tried using directives and such without success.

Solution

You can use ViewChildren to reference the inputs based on index. Add template ref #inputs to your input field:

<ion-input #inputs type="text"></ion-input>

In your component import ViewChildren and QueryList and...

@ViewChildren('inputs') inputs: QueryList<any>;

Then on your button click, where you call doSomething, in the code you presented, pass the index and set the focus on that field based on index:

<ion-row formArrayName="bicos" *ngFor="let item of homeForm.controls.bicos.controls; let i = index" >
  <button ion-button (click) = "doSomething(i)">
  <!-- ... -->

TS:

doSomething(index) {
  this.inputs.toArray()[index].setFocus();
}

StackBlitz

Answered By - AT82