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

Question

我有一个动态创建的表单页面，如下所示：

空格是输入，整行是一个按钮。有没有办法点击按钮，即整行，然后选择/关注相应的输入？请记住，输入的数量由用户决定，页面上最多可以有 300 行这样的行。

家.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>

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

Answer 1

您可以使用ViewChildren基于索引来引用输入。将模板引用添加#inputs到您的输入字段：

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

在组件的进口ViewChildren和QueryList与...

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

闪电战