有没有办法专注于 Angular 4/Ionic 3 上动态创建的表单？

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));
    }
}

主页.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>

我已经尝试过使用指令等但没有成功。

您可以使用ViewChildren根据索引引用输入。添加模板参考#inputs到您的输入字段：

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

在您的组件导入中ViewChildren and QueryList and...

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

然后点击您的按钮，您就可以拨打电话doSomething，在您提供的代码中，传递索引并根据索引将焦点设置在该字段上：

<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();
}

堆栈闪电战 https://stackblitz.com/edit/ionic-3gwv6g?file=pages%2Fhome%2Fhome.ts