PrimeNG radio button selecting multiple items

user_11467079 0
Viewed 2453

I'm creating multiple radio buttons dynamically using *ngFor, the problem is that it lets me select multiple items from the UI, my code is the following:

<div class="p-col-12">
    <p>Tipo de pregunta</p>
        <div *ngFor="let tipo_pregunta of tipos_pregunta">
            <p-radioButton formControlName="tipo_de_pregunta" inputIt="tipo_pregunta.value" name="tipo_pregunta" [value]="tipo_pregunta" [label]="tipo_pregunta.label" class="p-mb-3"></p-radioButton>
        </div>
</div>

If I create the buttons statically, such as:

<p-radioButton name="groupname" value="ps3" formControlName="console"></p-radioButton>
<p-radioButton name="groupname" value="ps4" formControlName="console"></p-radioButton>
<p-radioButton name="groupname" value="ps5" formControlName="console"></p-radioButton>

I have the same issue, any solution?

NOTE: When I submit the form, it just shows the last value I have clicked on, which means the bug is just visual, but it's still confusing and I would like to fix it.

primeng angular radio-button
2 Answers

Indeed, it works with PrimeNG 7 but not with PrimeNG 10, there is an issue opened on their github: https://github.com/primefaces/primeng/issues/9440

Here is a workaround while waiting for a fix:

this.questionForm.valueChanges.subscribe(e => {
  this.questionForm.setValue(e, { emitEvent: false });
});

See demo

Edit: it seems it will be fixed in PrimeNG 10.0.4

user_43593650

For anybody who is stuck on this issue, I had missed on the name attribute of radio button, the group of radio buttons should have the same name for p-radioButton . I gave same names for the radio button and it worked.

In the below eaxmple both p-radioButton have same value in the name attribute

            <p-radioButton name="componentName" value="ComponentName1" formControlName="componentName" inputId="city1"></p-radioButton>
            <label for="city1">ComponentName1</label>
        </div>
        <div class="p-field-radiobutton">
            <p-radioButton name="componentName" value="ComponentName2" formControlName="componentName" inputId="city2"></p-radioButton>
            <label for="city1">ComponentName2</label>
        </div>
user_193252770
Related