Form keeps on re-rendering when updating formArray values angular form

Question

I am create a subform in a form in Angular . https://codesandbox.io/s/distracted-cohen-4r1qd

The form keeps on re-rendering on adding certain input .

Here is the code

<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, Validators.required],
     insuranceType: [null, Validators.required],
     coverAmount: [null, Validators.required],
     premiumAmount: [null, Validators.required],
     frequency: [null, Validators.required],
     dueDate: [null, Validators.required],
     instExpDate: [null, Validators.required],
     companyCode: [null, Validators.required],
     ownerNames: this.fb.array([])
   });
   this.addOwnerNameField();
 }

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

As soon as i enter the text on textbox , it allows me to add only 1 character and then focus out from that textbox .

I think the UI of Form reloads every time i input something onto it .

Master Yoda · Accepted Answer · 2020-01-08 07:13:03Z

1

I got it from a friend of mine .

I am iterating on the value instead of control.

Changed code from

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

to

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

and its all done .

Thanks

answered Jan 8, 2020 at 7:13

Master Yoda

5318 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris · Accepted Answer · 2022-08-24 12:29:33Z

0

@Master Yodas answer is correct but if you just change it to controls you will get and error. Create a getter which returns ownerNames as Forms array:

get ownerNames () {
  return this.insuranceForm.controls['ownerNames'] as FormArray;
}

Then you can use it like this:

formArrayName="ownerNames" *ngFor="let owner of ownerNames.controls; let i=index"

This is a good reference: https://blog.angular-university.io/angular-form-array/

answered Aug 24, 2022 at 12:29

Chris

5856 silver badges13 bronze badges

Collectives™ on Stack Overflow

Form keeps on re-rendering when updating formArray values angular form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related