Radio Button unexspected behavior


Topic: Radio Button unexspected behavior

bitjuice pro asked 4 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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