1
votes

Changement de booléen sur (changement) événement

J'essaie d'utiliser un booléen pour détecter si un bouton radio dans un formulaire a été coché ou non.

(J'ai omis le code inutile pour les fichiers HTML et TS) p>

HTML:

valueChanged(event: MatRadioChange) {
  console.log(event.value); //will log the value for the button you clicked
}

TypeScript:

overdraft = false;

toggleEditable(event) {
  if ( event.target.checked ) {
    this.overdraft = true;
  }
}

L'événement n'est pas déclenché, car lorsque j'essaye de cliquez sur le bouton radio et soumettez le formulaire, découvert n'est pas défini sur vrai. CEPENDANT , si j'utilise un événement (click) au lieu de (change) , cela fonctionne bien, MAIS (click) les événements ont l'inconvénient de devoir double-cliquer sur les boutons radio pour que la sélection visuelle apparaisse, et donc je pense qu'il est nécessaire d'utiliser (changer) code > (voir plus ici: mat-checkbox ne vérifie pas si la condition est fausse (uniquement en double-clic) ).

Comment résoudre ce problème, de sorte que lorsque je clique sur le bouton radio, mon événement (change) est déclenché et le découvert est défini sur vrai sans utiliser les événements (clic) qui accompagnent des problèmes d'interface utilisateur?

SOLUTION :

Si vous voulez récupérer la valeur réelle du mat-radio-button , vous devrez faire les modifications suivantes:

1) Au lieu d'utiliser g [value] = "overdraft" en HTML, utilisez value sans crochets, comme ceci: Découvert

2) Dans votre code TypeScript, vous pouvez désormais accéder à la propriété value depuis HTML:

<mat-radio-button (change)="toggleEditable($event)" value="overdraft">Overdraft</mat-radio-button>

typescript angular events

1 commentaires

FYI - Événement émis lorsque la valeur du groupe change. Les événements de modification ne sont émis que lorsque la valeur change en raison de l'interaction de l'utilisateur avec un bouton radio

3 Réponses :

1
votes

Avez-vous essayé d'utiliser ngModel?

Cela pourrait être aussi simple que:

valueChanged(event) {
    this.overdraft = (event.value ==='overdraft');
}

Et dans votre contrôleur, vous pourriez avoir:

<mat-radio-group  [(ngModel)]="selectedValue" (change)="valueChanged($event)">
  <mat-radio-button value="overdraft">Overdraft</mat-radio-button>
  <mat-radio-button value="otherValue">Other</mat-radio-button>
</mat-radio-group>

7 commentaires

Merci, cela fonctionne très bien si je choisis le découvert, mais si je choisis otherValue (bouton radio 2), je veux que la valeur "otherValue" soit définie dans l'événement valueChanged. À l'heure actuelle, il définit toujours ce découvert sur «découvert». J'espère que cela a du sens. De plus, je ne vois pas l'utilisation de selectedValue, car il n'est jamais utilisé

selectedValue serait une bonne chose à avoir, si vous voulez utiliser la valeur sélectionnée ailleurs.

lorsque vous sélectionnez l'option 'otherValue', cela devrait être la valeur de l'événement. Essaie! =)

Je l'ai fait fonctionner, mais au lieu de [value] en HTML, je viens d'utiliser value (sans crochets) pour les boutons, donc dans le TypeScript valueChanged (event ) , je peux accéder à la valeur à partir du bouton radio, par exemple en utilisant console.log (event.value) // enregistrera la valeur du bouton choisi . J'ai modifié votre réponse et je l'approuverai une fois ma modification approuvée (elle est en cours d'examen par les pairs). Merci beaucoup pour l'aide! EDIT: J'ai ajouté ma modification / solution à mon OP.

assez juste, je pense que les crochets pourraient être supprimés progressivement de ng ... J'ai dû les supprimer de certains de mes modèles aussi parfois.

votre modification a été rejetée par quelques personnes ... J'ai modifié la réponse moi-même pour supprimer le []

Oh d'accord, c'est bizarre que je ne reçoive pas de notification ou de raison de la part des personnes qui l'ont rejeté, mais merci de me l'avoir fait savoir. J'ai accepté votre réponse - merci pour votre aide

0
votes

Vous pouvez également modifier la valeur directement dans le HTML lorsque l'événement change est déclenché:

  overdraft = false;
  display() {
    console.log(this.overdraft);
  }

<mat-radio-button (change)="overdraft = !overdraft; display()" [value]="overdraft">Overdraft</mat-radio-button>

La fonction d'affichage est uniquement ici à des fins de démonstration;)

1 commentaires

Merci pour l'aide. Cela n'a malheureusement pas tout à fait fonctionné. J'ai édité mon article original avec la solution si vous êtes intéressé.

1
votes

Avez-vous regardé ce que console.log (event.target.checked) vous donne?
Événements de bouton radio Angular 2 essayez Découvert Si ça marche, c'est peut-être un problème avec le bouton radio mat
Événement de changement de bouton radio de matériau Angular 4 suggère que vous avez besoin d'un autre type d'événement:

import {MdRadioChange} depuis '@ angular / material'; ... toggleEditable (événement: MdRadioChange) {...}

2 commentaires

Merci pour l'aide de connectedMind, j'ai déjà trouvé cette réponse avant de poster et j'ai essayé d'implémenter toggleEditable , mais cela n'a pas tout à fait fait le travail. J'ai trouvé une réponse en modifiant une autre réponse dans l'article - je l'ai modifiée dans mon article d'origine, si vous êtes intéressé par la solution que j'ai trouvée.

Je suppose que vous voulez dire éditer le type d'événement mentionné, qui faisait partie de ma proposition. Alors je propose: au moins donne-moi +1;)