Angular элементы управления формой очень быстро теряют фокус

Question

В некоторых моих Angular элементах управления формой фокус теряется очень быстро, примерно через 2 секунды или 1 нажатие клавиши. Формы, в которых это происходит, делятся на div со структурой * ngFor (см. Код ниже). Как я мог сделать эту остановку, чтобы кто-то мог просто заполнить весь свой ответ сразу?

<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

Вы не должны l oop через значение, подобное этому fillInForm.controls.profiles?.value. Значение является объектом, и этот объект будет постоянно меняться и отображать элемент каждый раз. Это будет иметь эффект, который вы описали, когда фокус будет потерян, поскольку это новый элемент.

Таким образом, вам нужно l oop через форму 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>

демо ?