Angular 形式控件很快就会失去焦点

Question

在我的一些 Angular Form 控件中，在大约 2 秒或按 1 次按键后，焦点很快就会消失。发生这种情况的表单位于具有 *ngFor 结构的 div 中(请参见下面的代码)。我怎样才能停下来，以便有人可以立即填写完整的答案？

<div formArrayName="profiles" *ngFor="let profile of fillInForm.controls.profiles?.value; let i = index">
    <div [formGroupName]="i">
      <input type="text" formControlName="network" placeholder="Network">
      <input type="text" formControlName="username" placeholder="Username">
      <input type="text" formControlName="url" placeholder="URL">
    </div>
</div>

(如果我没有向您提供足够的信息，我很抱歉，我对此很陌生。如果您需要了解更多信息，请告诉我)

Answer 1

您不应该像 fillInForm.controls.profiles?.value 这样循环遍历该值。该值是一个对象，该对象每次都会不断变化并渲染元素。这将产生您所描述的效果，因为它是一个新元素，因此焦点将丢失。

所以你必须循环遍历表单控件。

<div formArrayName="profiles" *ngFor="let profile of fillInForm.get('profiles').controls; let i = index">
    <div [formGroupName]="i">
      <input type="text" formControlName="network" placeholder="Network">
      <input type="text" formControlName="username" placeholder="Username">
      <input type="text" formControlName="url" placeholder="URL">
    </div>
</div>

demo 🚀