CODEWITHSUNDEEP
angularradio-buttonprimeng
FlowMafia
FlowMafia

Reputation: 1002

PrimeNG radio button selecting multiple items

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.

Upvotes: 3

Views: 5473

Answers (2)

Audentes
Audentes

Reputation: 79

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>

Upvotes: 2

Antikhippe
Antikhippe

Reputation: 6685

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

Upvotes: 2

Related Questions