Después de que el usuario seleccione una radio de iones, se llama a una función en el componente. Necesito esa función para deseleccionar la radio.
LA PLANTILLA:
<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>No estoy seguro sobre el caso de uso aquí, pero aquí vamos...
Dado que está utilizando un formulario reactivo, tiene algunas funciones que puede ejecutar en los controles de formulario, una de ellas es reset() . Entonces, en su función, simplemente restablecería el valor así:
myFunction() { this.myForm.controls.listOptions.reset() }y lo restablecerá a desmarcado, si ese es su estado inicial del botón de opción.
Demostración, que establece el botón de opción de restablecimiento después de un par de segundos
Puede usar checked para eso. Y use un valor booleano para manipularlo. En .html agrega esto
<ion-radio checked={{isChecked}} value="1" (ionSelect)="myFunction($event)"></ion-radio>En .ts agrega esto:
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 hay varios botones de radio, puede usar una matriz de indicadores como isChecked[] .
Encontré algunos problemas al hacerlo con Ionic 4 y los resolví de dos maneras diferentes, dependiendo de la versión 4.x.
vista
<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>controlador
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 encontró algunos problemas, mueva el clic de ion-radio a ion-item en cada botón de opción. En un ejemplo con 4.11.x Tuve que hacerlo, pero no sé exactamente por qué.
Puedes jugar con un ejemplo aquí .
Espero que ayude a alguien.