click one prime ng Radio Buttons in a Form Array affect all Radio Buttons in angular 11

Question

Behavior

check on one radio button in a group of FormArray checks all other radio buttons in other groups. As this is a Form Array all the formControlName values for the radio buttons are the same.

Expected behavior When selecting a radio button in one group in a Form Array it should have no impact on the radio buttons in another group.

Minimal reproduction of the problem

https://stackblitz.com/edit/primeng-radio-form-array-selection-issue-rmeptx?file=src%2Fapp%2Fapp.component.html

Answer 1

This issue is due to the radio buttons across the form array having the same value. I found an (ugly) work around that uses ngModel and the onClick event. Also note the ngModelOptions which is required to use ngModel inside a FormGroup

public userAgree: boolean = null;

updateUserAgreeFormControl() {
  if (this.reportCommentFormGroup)  
    this.reportCommentFormGroup.get('userAgree').setValue(this.userAgree);
}

<span class="radio-button">
    <p-radioButton name="userAgree" label="Agree" [value]="true" [(ngModel)]="userAgree"      
      [ngModelOptions]="{standalone: true}" (onClick)="updateUserAgreeFormControl()"></p-radioButton>
</span>