0
129
Vistas¿Cómo puedo desmarcar el primer botón de radio al seleccionar el segundo y revertir cuando tengo 2 grupos de radio?
Quiero archivar que si selecciono el primer botón de radio, debería recibir el valor true y el segundo botón de radio debería estar deseleccionado y recibir el valor false también a la inversa si selecciono el segundo botón de radio, debería recibir el valor true y el primer botón de radio debe estar deseleccionado y recibir el valor false : es importante que al enviar envíe 2 parámetros en el backend Verdadero / Falso para cada Radio, esa es la razón por la que no los he colocado en el mismo grupo
Este es mi componente html real:
<div class="col-3 col-sm-3 col-md-3 mb-2"> <mat-radio-group aria-label="Select an option" formControlName="male"> <mat-radio-button [value]="true" [checked]="false" [(ngModel)]="male" name="male" (change)="firstRadioChange($event)">Male</mat-radio-button> </mat-radio-group> <mat-radio-group aria-label="Select an option" formControlName="female"> <mat-radio-button [value]="false" [checked]="false" [(ngModel)]="female" name="female" (change)="secondRadioChange($event)" >Female</mat-radio-button> </mat-radio-group> </div>Este es mi ts:
firstRadioChange($event){ console.log($event.value) } secondRadioChange($event){ console.log($event.value) }3 Respuestas
Responde la pregunta0
Simplemente agruparía los botones de radio, por defecto solo se puede habilitar uno de ellos.
<mat-radio-group aria-label="Select an option" (change)="onChange($event)"> <mat-radio-button value="1">Option 1 Male</mat-radio-button> <mat-radio-button value="2">Option 2 Female</mat-radio-button> <br> <br> Selected value: {{selectedValue | json}}, send to backend sex as: {{selectedSexObj | json}} </mat-radio-group> @Component({ selector: 'radio-overview-example', templateUrl: 'radio-overview-example.html', styleUrls: ['radio-overview-example.css'], }) export class RadioOverviewExample { selectedSexObj = { male: false, female: false }; selectedValue: any; onChange(event: any) { this.selectedValue = event.value; if (event.value == 1) { this.selectedSexObj = { male: true, female: false }; } else { this.selectedSexObj = { male: false, female: true }; } } }Aquí hay un ejemplo práctico: https://stackblitz.com/edit/angular-qggcqg-qydurn?file=src%2Fapp%2Fradio-overview-example.ts
0
Un par de notas sobre tu intento.
- Está utilizando formularios controlados por plantillas y formularios reactivos , debe usar solo uno en cada entrada o, de lo contrario, podrían interferir entre sí. En la demostración a continuación, he utilizado el enfoque de formularios reactivos .
- Usó 2
mat-radio-grouppero debe usar solo uno para la interfaz de usuario, luego, antes de enviar los datos, modifique los datos de acuerdo con sus necesidades.
Aquí está el código relevante:
HTML
<div class="col-3 col-sm-3 col-md-3 mb-2"> <mat-radio-group aria-label="Select an option" [formControl]="gender"> <mat-radio-button value="male"> Male </mat-radio-button> <mat-radio-button value="female"> Female </mat-radio-button> <mat-radio-button value="other"> Other </mat-radio-button> </mat-radio-group> </div>TS
gender: FormControl = new FormControl('male'); submit() { const responseToServer = { male: this.gender.value === 'male', female: this.gender.value === 'female', other: this.gender.value === 'other', }; this.http.post('your-server-url', responseToServer); }0
Puedes seguir este ejemplo
Por lo general, los botones de radio deben colocarse dentro de un a menos que la estructura DOM lo haga imposible (por ejemplo, botones de radio dentro de las celdas de la tabla). El grupo de opción tiene una propiedad de valor que refleja el botón de opción actualmente seleccionado dentro del grupo.
https://stackblitz.com/edit/angular-tgufpa?file=src%2Fapp%2Fradio-overview-example.html