我正在Angular中创建一个子窗体。 https://codesandbox.io/s/distracted-cohen-4r1qd

添加某些输入后，表单将继续重新呈现。

这是代码

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

 insuranceForm: FormGroup;

   constructor(private fb: FormBuilder) {}

   ngOnInit() {
    this.initializeForm();
  }

 initializeForm() {
   this.insuranceForm = this.fb.group({
     productName: [null,Validators.required],policyNumber: [null,insuranceType: [null,coverAmount: [null,premiumAmount: [null,frequency: [null,dueDate: [null,instExpDate: [null,companyCode: [null,ownerNames: this.fb.array([])
   });
   this.addOwnerNameField();
 }

 addOwnerNameField() {
   const ownernameArray = this.insuranceForm.controls.ownerNames as FormArray;
   ownernameArray.push(
     this.fb.group({
       name: ""
     })
   );
 }

在文本框中输入文字后，它只允许我添加1个字符，然后将焦点从该文本框中移出。

我认为每当我向其中输入内容时，都会重新加载Form的UI。