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

Viewed 271
1 Answers

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>

Related