Une fois que l'utilisateur a sélectionné une radio ionique, une fonction est appelée sur le composant. J'ai besoin de cette fonction pour désélectionner la radio.

LE GABARIT:

  <form [formGroup]="myForm">
    <ion-list radio-group formControlName="listOptions">
      <ion-item>
        <ion-label>Option 1</ion-label>
        <ion-radio value="1" (ionSelect)="myFunction($event)"></ion-radio>
      </ion-item>
    </ion-list>
  </form>
5
user33276346 20 avril 2017 à 20:24

3 réponses

Meilleure réponse

Je ne suis pas sûr du cas d'utilisation ici, mais nous y voilà ...

Puisque vous utilisez un formulaire réactif, vous disposez de certaines fonctions que vous pouvez exécuter sur les contrôles de formulaire, dont reset(). Donc, dans votre fonction, vous réinitialiseriez simplement la valeur comme ceci:

myFunction() {
  this.myForm.controls.listOptions.reset()
}

Et il le réinitialisera sur non coché, si tel est votre état initial du bouton radio.

Démo, qui réinitialise le bouton radio après quelques secondes

5
AJT82 20 avril 2017 à 20:55

J'ai trouvé quelques problèmes en faisant cela avec Ionic 4 et j'ai résolu cela de deux manières différentes, en fonction de la version 4.x.

voir

<ion-item>
  <ion-label> A </ion-label>
  <ion-radio
    (click)="changeA()"
    [checked]=a
  >
  </ion-radio>
</ion-item>


<ion-item>
  <ion-label> B </ion-label>
  <ion-radio
    (click)="changeB()"
    [checked]=b
  >
  </ion-radio>
</ion-item>

<ion-button (click)="remove()">
  <ion-label>
    CLEAN
  </ion-label>
</ion-button>

contrôleur

a = false;
b = false;

changeA(){
  this.a = !this.a
  if(this.a && this.b)
    this.b = false;
}
changeB(){
  this.b = !this.b
  if (this.b && this.a)
    this.a = false;
}

remove(){
  this.a = false;
  this.b = false;
}

Si vous rencontrez des problèmes, déplacez le clic de ion-radio vers ion-item dans chaque bouton radio. Dans un exemple avec 4.11.x. Je devais le faire mais je ne sais pas exactement pourquoi.

Vous pouvez jouer avec un exemple ici.

J'espère que cela aidera quelqu'un.

0
Juan Antonio 10 avril 2020 à 08:59

Vous pouvez utiliser checked pour cela. Et utilisez une valeur booléenne pour le manipuler. Dans .html, ajoutez ceci

<ion-radio checked={{isChecked}} value="1" (ionSelect)="myFunction($event)"></ion-radio>

Dans .ts, ajoutez ceci:

export class SomePage{
  isChecked = false;

  constructor(...){...}

  myFunction($event){
    this.isChecked = !this.isChecked; // I am assuming you want to switch between checking and unchecking while clicking on radio.
  }

Si plusieurs boutons radio, vous pouvez utiliser un tableau d'indicateurs comme isChecked[].

0
Sagar Kulkarni 20 avril 2017 à 18:56