Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

1.5K
Visualizações
Angular material mat-radio-group doesn´t allow default value with ngModel

I am currently struggling with a more complex implementation using mat-radio-group. I upgraded my Angular version from 10 to 13 and now a default value in a mat-radio-group is not recognized anymore.

To keep it simple you can reproduce it with the example from Angular Material: https://material.angular.io/components/radio/examples

Use the stackblitz of "Radios with ngModel". Unfortunately I couldn´t fork it. Then try to set "Winter" as default. It won´t be checked after recompiling.

Is the only way to get around this by using the [checked] property? What did Angular change to change this behavior?

over 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

0

The checked attribute for setting the default radio button has been there all the time, from my recollection at least since Material 9.x (and possibly before).

Can you try the following:

In you TS code:

Set your favorite season selection to a constant string value:

favoriteSeason: string = 'Spring';

Then in your HTML set the checked attribute in the ngFor loop for each mat-radio-button control as follows:

[checked]="favoriteSeason == season"

So, your radio group will look as shown:

<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>

The above should give you the desired default selection.

Edit: You might have experimented with the above and found out that the checked condition isn't needed if we set the initial value in our TS code.

Try the following:

In your TS code, don't assign the binding variable. Leave it like this:

favoriteSeason: string;

Next, add the following HTML button:

<button (click)="setValue()">Press Here</button>

Now, define the button click event setValue as shown:

setValue() {
    this.favoriteSeason = 'Autumn';
}

When the above runs, there is no initial selection. When you click on the button the season will be set to 'Autumn'!

The above shows that you can set the default radio selection using either code or with the checked attribute.

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda