web-dev-qa-db-fra.com

Bouton d'option par défaut sélection du matériau angulaire 2

Je travaille sur le bouton radio Matériel angulaire 2 suivant cette documentation: https://material.angular.io/components/component/radio .

Le problème auquel je suis confronté est d'avoir pour le bouton radio une valeur sélectionnée par défaut de No. Si vous voyez dans le répertoire: https://plnkr.co/edit/jdRxVLdSfFqR4XOdpyUN?p=preview vous constaterez qu'aucune des options n'est sélectionnée. Je voudrais que la valeur par défaut soit No lors du chargement de la page. 

angularangular-material2
10
Aakash Thakur

Beaucoup de femmes ne semblent plus fonctionner pour moi. Il y a un stackblitz modifié ici:

Blitz

Comme mentionné, nous pouvons soit définir le ngModel et la variable:

[(ngModel)]="favoriteSeason"

et dans le fichier 'ts':

  favoriteSeason: string = 'Winter';

Ou nous pouvons définir le coché:

[checked]="season === 'Winter'"

Un autre petit truc que j'ai découvert récemment est que si vous donnez par erreur une case à cocher incorrecte (identifiants en double), cela ne fonctionne pas - vous ne pouvez rien vérifier. Assurez-vous que vos identifiants sont uniques.

12
PeterS

Vous pouvez utiliser checked, comme suit:

[checked]="data.value ==='false'"

remarquez que nous vérifions en utilisant la chaîne 'false', au lieu de false, car votre valeur a la chaîne avec la valeur false.

Plunker

9
AJT_82

il existe une autre option: vous pouvez utiliser [(ngModel)] pour initialiser le md-radio-group avec votre composant.

plunker demo .

5
Pengyy

Vous pouvez y parvenir avec l'attribut [checked] . Voir ceci Plunker

4
anoop

J'aime l'approche réactive lorsque je travaille avec des boutons radio matériels. Vous trouverez ci-dessous un exemple de vérification de true et false avec votre base de données pour un formControlName spécifique.

Composant dans la boîte de dialogue

<mat-radio-group formControlName="trueClient">
                <mat-radio-button class="material-radio" value="true" [checked]="data.trueClient === 'true'">True Client</mat-radio-button>
                <mat-radio-button class="material-radio" value="false" [checked]="data.lostLead === 'false'">Lost Lead</mat-radio-button>
        </mat-radio-group>

S'il s'agit d'un formulaire de mise à jour, veillez à définir les valeurs dans votre générateur de formulaire. Exemple ci-dessous:

Fichier .ts pour le composant dans la boîte de dialogue. 

this.viewClient.setValue({
      trueClient: this.data.trueClient
    });

Dans ce cas, j'ouvre les données dans une boîte de dialogue. Donc, les données proviennent de ce qui suit: Composant.ts avant d'ouvrir la boîte de dialogue. Juste une référence pour que vous sachiez où j'ai obtenu la variable de données ci-dessus pour définir les valeurs. 

Composant utilisé pour ouvrir la boîte de dialogue. Référence à Dialogue dans la documentation sur les matériaux pour plus d'informations sur la configuration. 

const dialogRef = this.dialog.open(ClientNotesComponent, {
        height: '600px',
        width: '800px',
        data: {trueClient: trueClient}
    });
 });
}
3
Kevin Summersill
<mat-radio-button [checked]="true"</mat-radio-button>
1
Burlon23