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这样循环遍历值。 该值是一个对象，该对象每次都会不断变化并呈现元素。 这将产生您描述的效果，因为它是一个新元素，焦点将丢失。

所以你必须遍历表单controls 。

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

演示🚀

Answer 2

在我的某些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>

（很抱歉，如果我没有给您足够的信息，这是我的新手。请告诉我您是否需要了解更多信息）