Angular PatchValue is not working with FormArray

Question

I am trying to patch a value so my input works like ng model

here's the code

 this.purchaseOrderForm.patchValue({
      itemForm: {
        inputSubTotal: this.tempSellPrice.valueOf().toString()
      }

    });

but it doesn't work

 this.purchaseOrderForm.at(i).patchValue({
      itemForm: {
        inputSubTotal: this.tempSellPrice.valueOf().toString()
      }

    });

doesn't work also, i = index count.

is there a way to update my form without saving it yet?

Answer 1

unfortunately, you can't patch or set a value directly onto a form array, you need to patch or set the values of the form groups / controls within it, like so:

  onChangeState(i){
    const fg = this.itemsArray.at(i);
    const fgValue = fg.value;
    fg.patchValue({
      total: fgValue.fvalue + fgValue.svalue
    });
  }

here is a blitz demo: https://stackblitz.com/edit/angular-wyly3s?file=src/app/app.component.ts

I cant' say what exactly is wrong in your question code without knowing the true structure of the form you're working with

Answer 2

I took a look at you StackBlitz example here https://stackblitz.com/edit/angular-c6xqxm and I think I found the issue. You have to nest the [formGroupName]="1" in a child element of the *ngFor

Instead of

<div *ngFor="let group of itemsArray.controls; let i = index;" [formGroupName]="i"> 

    //your code...      

</div>

try

<div *ngFor="let group of itemsArray.controls; let i = index;" >
  <div [formGroupName]="i"> <----------

    //your code...

  </div>
</div>