Angular 在Ionic框架上键入文本时，动态表单字段会导致对输入的焦点不集中

我在一个动态表单中工作，可以动态添加一些字段。表格的结构如下：

FormGroup -> FormArray -> FormGroup 

从实践上讲，结构是

Groups -> [0...,n] -> Value -> [0...,n]

问题是，每次我在动态输入上键入一些文本时，Ionic似乎都会启动摘要过程，从而销毁并重新创建DOM对象

在这种情况下，因为输入是用*ngFor动态生成的，所以我失去了对象的焦点，我不能再输入文本，除非我再次单击输入并键入另一个字符

如果单击生成的输入并调整浏览器窗口的大小，也会发生相同的行为。组件焦点松动，我无法再键入文本

并非动态生成的所有组件输入都不会发生这种情况。

请看下面的代码：

<!-- component.html -->

<form [formGroup]="componentiForm">
    <ion-list>
          <ion-item>
            <ion-label position="floating">Codice</ion-label>
            <ion-input formControlName="codiceImpianto" type="text" placeholder="Codice impianto"></ion-input>
        </ion-item>

        <!-- HERE OTHER INPUT -->

        <div formArrayName="gruppi">
            <h4>Componenti
                <ion-button size="small" (click)="addGruppo()">
                    <ion-icon name="add"></ion-icon>
                </ion-button>
            </h4>
            <div class="box-valori" *ngFor="let gruppo of componentiForm.get('gruppi').value ;index as i"
                 [formGroupName]="i">
                <h5>Componente {{i}}</h5>
                <button (click)="addValore(i)"> Aggiungi valori</button>
                <!--                    <ion-button size="small" (click)="addValore(i)">-->
                <!--                        <ion-icon name="add"></ion-icon>-->
                <!--                    </ion-button>-->
                <div formArrayName="valori">
                    <h3>Parametri del componente</h3>

                    <div class="box-valori"
                         *ngFor="let valore of componentiForm.controls.gruppi['controls'][i].get('valori').value ;index as j">
                        <ion-list [formGroupName]="j">
                            <ion-item>
                                <ion-label position="floating">Nome Parametro*</ion-label>
                                <ion-input formControlName="key" type="text"
                                           placeholder="Nome Parametro"></ion-input>
                            </ion-item>
                            <ion-item>
                                <ion-label position="floating">Valore*</ion-label>
                                <ion-input formControlName="val" type="text" placeholder="Valore"></ion-input>
                            </ion-item>
                        </ion-list>
                    </div>
                </div>
            </div>
        </div>
    </ion-list>
</form>

我希望避免在不绑定包含表单值的formControlName的情况下创建变量。。。。这似乎是一个非常糟糕的解决办法

有什么办法可以避免这种情况？我做错什么了吗？可能是虫子吗

---

我使用的是Ionic版本：5.4.14

您需要在“控件”上循环，而不是在“值”上循环，这是ComponentForm.get（'gruppi'）。值必须是ComponentForm.get（'gruppi'）。控件和ComponentForm.controls.gruppi['controls'][i].get（'valori'）。值必须是ComponentForm.controls.gruppi['controls'][i].get（'valori'）。谢谢你。。成功了！但实际上有什么区别呢？“作为j的索引”应该是“作为索引”的索引*ngFor@LucaT，当您迭代“值”时，您会遇到一个问题：当您更改输入时，“值”会更改。在每次改变时，角度“重画”，这就是原因，因为你觉得你失去了焦点。如果在“控件”上迭代，“控件不更改”-是一个对象-，则是控件的“值”属性change@Eliseo非常感谢。是的，很清楚！我想反正是关于爱奥尼亚的。。。我做了一些类似的纯角度，但工作！再次感谢你。

// other component code

componentiForm: FormGroup;

ngOnInit() {
        this.componentiForm = this.fb.group({
            codiceImpianto: new FormControl('', [Validators.required]),
            ......
            gruppi: this.fb.array([])
        });
}

addGruppo(): void {
        (this.componentiForm.get('gruppi') as FormArray).push(
            this.fb.group({valori: this.fb.array([])})
        );
}

addValore(groupId): void {

        const kv: FormGroup = this.fb.group({
            key: new FormControl('', {validators: Validators.required}),
            val: new FormControl('', {validators: Validators.required})
        });

        ((this.componentiForm.get('gruppi') as FormArray).at(groupId).get('valori') as FormArray).push(kv);
        console.log('Valori della form', this.componentiForm.get('gruppi'));
 }
 // other component code