Actualmente estoy luchando con una implementación más compleja usando mat-radio-group. Actualicé mi versión de Angular de 10 a 13 y ahora ya no se reconoce un valor predeterminado en un mat-radio-group.
Para mantenerlo simple, puede reproducirlo con el ejemplo de Angular Material: https://material.angular.io/components/radio/examples
Use el stackblitz de "Radios con ngModel". Desafortunadamente no pude bifurcarlo. Luego intente configurar "Invierno" como predeterminado. No se comprobará después de volver a compilar.
¿Es la única forma de evitar esto usando la propiedad [marcada]? ¿Qué cambió Angular para cambiar este comportamiento?
El atributo checked para configurar el botón de opción predeterminado ha estado allí todo el tiempo, según recuerdo, al menos desde Material 9.x (y posiblemente antes).
Puedes intentar lo siguiente:
En tu código TS:
Establezca su selección de temporada favorita en un valor de cadena constante:
favoriteSeason: string = 'Spring'; Luego, en su HTML, configure el atributo checked en el ciclo ngFor para cada control mat-radio-button siguiente manera:
[checked]="favoriteSeason == season"Entonces, su grupo de radio se verá como se muestra:
<mat-radio-group aria-labelledby="example-radio-group-label" class="example-radio-group" [(ngModel)]="favoriteSeason"> <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season" [checked]="favoriteSeason == season"> {{ season }} </mat-radio-button> </mat-radio-group>Lo anterior debería darle la selección predeterminada deseada.
Editar: es posible que haya experimentado con lo anterior y haya descubierto que la condición checked no es necesaria si establecemos el valor inicial en nuestro código TS.
Prueba lo siguiente:
En su código TS, no asigne la variable vinculante. Déjalo así:
favoriteSeason: string;A continuación, agregue el siguiente botón HTML:
<button (click)="setValue()">Press Here</button> Ahora, defina el evento de clic de botón setValue como se muestra:
setValue() { this.favoriteSeason = 'Autumn'; } Cuando se ejecuta lo anterior, no hay selección inicial. ¡Al hacer clic en el botón, la estación se establecerá en 'Autumn' !
Lo anterior muestra que puede establecer la selección de radio predeterminada utilizando el código o con el atributo marcado.