web-dev-qa-db-fra.com

Comment lier au modèle avec Matériau angulaire <mat-button-toggle>?

Jetez un coup d'œil à ce joueur: https://plnkr.co/edit/yu95hUrKlUh4Ttc5SwYD?p=preview

Lorsque j'utilise <mat-slide-toggle>, je peux modifier les valeurs de mon composant:

<mat-slide-toggle [(ngModel)]="myFlagForSlideToggle">Toggle me!</mat-slide-toggle>

myFlagForSlideToggle est mis à jour comme prévu.

Mais lorsque j'utilise <mat-button-toggle>, les valeurs ne sont pas mises à jour. Je devais ajouter ngDefaultControl pour que cet exemple fonctionne, mais je ne suis pas certain de son importance.

<mat-button-toggle [(ngModel)]="myFlagForButtonToggle" ngDefaultControl>Toggle me!</mat-button-toggle>

Quelle est la bonne façon de lier un état de bouton au composant?

angularangular-material
6
Mateusz Stefek

Le composant MatButtonToggle n'implémente pas ControlValueAccessor et vous ne pouvez donc pas utiliser ngModel dessus. ngDefaultControl a été introduit pour à d'autres fins .

MatButtonToggle est censé faire partie de mat-button-toggle-group. Mais si vous voulez l'utiliser comme composant autonome et y associer un modèle, voici quelques exemples:

<mat-button-toggle 
  [checked]="myFlagForButtonToggle" 
  (change)="myFlagForButtonToggle = $event.source.checked">
    Toggle me!
</mat-button-toggle>

Exemple Plunker

18
yurzui
public selectedVal: string;
constructor() { }

ngOnInit(){
  this.selectedVal ='option1';
} 

public onValChange(val: string) {
  this.selectedVal = val;
}

 <mat-button-toggle-group #group="matButtonToggleGroup" [value]="selectedVal" (change)="onValChange(group.value)" >
  <mat-button-toggle value="option1">
    Option 1
  </mat-button-toggle>
  <mat-button-toggle value="option2">
    Option 2
  </mat-button-toggle>
</mat-button-toggle-group>
5
Uliana Pavelko

mat-button-toggle n'a pas de valeur booléenne et [(ngModel)] ne fonctionnera pas. Voir doc .

Ces bascules peuvent être configurées pour se comporter comme des boutons radio ou des cases à cocher.

un cas d'utilisation peut être comme ça

<mat-button-toggle-group  [(ngModel)]="myFlagForButtonToggle">
  <mat-button-toggle value="button1"  ngDefaultControl>Toggle me!</mat-button-toggle>
  <mat-button-toggle value="button2"  ngDefaultControl>Toggle me!</mat-button-toggle>
  <mat-button-toggle value="button3"  ngDefaultControl>Toggle me!</mat-button-toggle>
</mat-button-toggle-group>

et changez votre booléen en myFlagForButtonToggle :string; 

3
Hareesh

Si vous essayez d'utiliser mat-button-toggle pour activer/désactiver quelque chose, vous devrez utiliser une liaison sur mat-button-toggle-group et vous assurer que le mat-button-toggle a lui-même les valeurs booléennes de true et false, pas les valeurs de chaîne. C'est-à-dire:

<mat-button-toggle-group [(ngModel)]="isEnabled">
    <mat-button-toggle [value]="true"> Enable </mat-button-toggle>
    <mat-button-toggle [value]="false"> Disable </mat-button-toggle>
</mat-button-toggle-group>
2
Andrew Favaloro

Avec angulaire 6.1.3 et matériau angulaire 6.4.6 en utilisant Slide Toggle } _ (c'est-à-dire, <mat-slide-toggle>) 

Modèle

<mat-slide-toggle [checked]="isAwesome"
   (change)="toggleIsAwesome()">
   Is TypeScript Awesome?
</mat-slide-toggle>

Composant

export class AwesomeExampleComponent {
   // props
   isAwesome = false;

   // methods
   toggleIsAwesome() {
      this.isAwesome = !this.isAwesome;
      // could put additional logic here
   }
}

J'utilise cette solution et elle s'aligne parfaitement sur la règle Guide de style :

Do place la logique de présentation dans la classe de composant et non dans le modèle.

0
Eric D. Johnson