Angular 表单在更新表单中的formArray值时继续重新渲染

我正在用Angular创建表单中的子表单。

表单在添加某些输入时会继续重新呈现

这是密码

<form class="nlsg-c-form-element" [formGroup]="insuranceForm">
  <div class="account-details accountDetails" formArrayName="ownerNames">
    <h6>Additional policy details</h6>
    <!-- owner name -->
  <div
  class="row"
  *ngFor="let ownerName of insuranceForm.controls.ownerNames?.value;let i = index"
>
     <div class="col">
     <div class="nlsg-c-form-element__form-group" [formGroupName]="i">
        <label
        class="nlsg-c-form-element__label"
        [innerHtml]="'Owner name'"
      ></label>
      <input
        class="nlsg-c-form-element__control"
        type="text"
        formControlName="name"
      />
    </div>
  </div>

  <div class="col forMargin">
    &nbsp;
  </div>

  <div class="col" [formGroupName]="i">
    <span
      class="trash"
      [hidden]="!insuranceForm.controls.ownerNames.controls[i].controls.name.value"
    >
    </span>
    <span
      class="trashGray"
      [hidden]="insuranceForm.controls.ownerNames.controls[i].controls.name.value"
    >
    </span>
  </div>
</div>

一旦我在文本框中输入文本，它只允许我添加一个字符，然后从该文本框中调出焦点

---

我想每次我在表单上输入东西时，表单的UI都会重新加载。

我是从我的一个朋友那里得到的

我正在迭代值而不是控件

从更改代码

*ngFor="let ownerName of insuranceForm.controls.ownerNames?.value;let i = index"

到

一切都结束了

谢谢

*ngFor="let ownerName of insuranceForm.controls.ownerNames?.value;let i = index"

*ngFor="let ownerName of insuranceForm.controls.ownerNames?.controls;let i = index"