angular - How can I access FormArray element values?

Question

<div [formGroup]="certificateForm">
<div formArrayName="certificateTextPlacements" *ngFor="let certificateTextPlacement of certificateTextPlacements().controls; let i = index;">

  <div
    [formControlName]="i"
    [ngStyle]="{
      'margin-left': certificateTextPlacement.xPos+'px',
      'margin-top': certificateTextPlacement.get('YPos').value+'px',
      'position': 'absolute',
      'font-size': '22px',
      'z-index': 10,
      'background-color': certificateTextPlacement.get('backgroundColour').value
    }"> [[ {{ certificateTextPlacement.get('name').value }} ]] </div>
</div>

Is there a particular method to use when looping through a FormArray to access an array items property value?

I want to access each array items property value of 'xPos', 'yPos', 'name' and 'backgroundColour'

EDIT - I fixed this by removing [formControlName]="i" and now certificateTextPlacement.get('YPos').value works

question from:https://stackoverflow.com/questions/65936732/how-can-i-access-formarray-element-values

Answer 1

Remove [formControlName]="i"

Use: certificateTextPlacement.get('yPos').value to access values