Angular FormGroup 重点关注按键问题。无法输入超过 1 个字符

Question

我正在尝试遍历表单控件并尝试显示字段。这些字段的显示没有任何问题，并且还保存了正确绑定的值并显示了输出。我面临的问题是，在这些字段上按键时，光标失去焦点并且无法输入超过 1 个字符。

我已经简化了项目并创建了下面的演示。添加了 2 个字段，1 个在正常循环中工作，另一个不在控制循环中工作。不确定出了什么问题。

https://stackblitz.com/edit/angular-ivy-ndnzjd

Answer 1

每次输入字段的值发生变化时，都会调用 toArray() 方法并再次重新呈现 ngFor 中的所有元素，这就是为什么要关注输入输出的原因。

您可以通过在ngFor 上使用trackBy 函数来解决这个问题。 trackBy 函数将索引和当前项目作为参数，并且需要 return 此项目的唯一标识符。

component.html

<div *ngFor="let item of toArray(form.controls);trackBy:trackByIndex" class="form-row">not working
          <input [formControlName]="mytestfield" [id]="mytestfield" />
 </div>

component.ts

 trackByIndex(index,value){
    return index;
  }

Example