Angular 表单控件很快失去焦点

Question

In some of my Angular Form controls, the focus loses very quickly, after about 2 seconds or 1 key-press. The forms where this happens are in divs with a *ngFor structure (see code below). How could I make this stop, so that someone can just fill in their entire answer at once?

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

(I'm sorry if I have not given you enough information, I am new to this. Please tell me if you need to know more)

Answer 1

You shouldn't loop through the value like this fillInForm.controls.profiles?.value . The value is an object and this object will keep changing and render the element every time. This will have the effect you described where the focus will be lost as it is a new element.

So you have to loop through form 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>

demo 🚀

Answer 2

In some of my Angular Form controls, the focus loses very quickly, after about 2 seconds or 1 key-press. The forms where this happens are in divs with a *ngFor structure (see code below). How could I make this stop, so that someone can just fill in their entire answer at once?

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

(I'm sorry if I have not given you enough information, I am new to this. Please tell me if you need to know more)