Topic: Radio Button unexspected behavior
Hi,
I'm using radio button in this way:
<div class="btn-group btn-group-sm">
<label mdbBtn rounded="true" class="px-3" (ngModelChange)="changeSortWay($event)" color="default"
[(ngModel)]="sortWay" mdbRadio="asc" mdbWavesEffect mdbTooltip="Ordinamento crescente"
container="body">
<i class="fas fa-long-arrow-alt-up"></i>
</label>
<label mdbBtn rounded="true" class="px-3" (ngModelChange)="changeSortWay($event)" color="default"
[(ngModel)]="sortWay" mdbRadio="desc" mdbWavesEffect mdbTooltip="Ordinamento decrescente"
container="body">
<i class="fas fa-long-arrow-alt-down"></i>
</label>
</div>
but if I click twice on the first button, all buttons become inactive.
If I remove tag and mdbToolTip attributes, it works fine
<div class="btn-group btn-group-sm">
<label mdbBtn rounded="true" class="px-3" (ngModelChange)="changeSortWay($event)" color="default"
[(ngModel)]="searchOption.sortWay" mdbRadio="asc" mdbWavesEffect>
up
</label>
<label mdbBtn rounded="true" class="px-3" (ngModelChange)="changeSortWay($event)" color="default"
[(ngModel)]="searchOption.sortWay" mdbRadio="desc" mdbWavesEffect>
down
</label>
</div>
Can you help me to fix this problem? thanks
Marco
Konrad Stępień staff answered 4 years ago
Hi @bitjuice,
I am afraid that the above example is not created correctly.
I think a better way would be to create a function to change the activated button and give it styles or css class.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.3.1
- Device: PC
- Browser: Chorme
- OS: Windows 10
- Provided sample code: No
- Provided link: No