0
votes

Gestion des boutons radio avec Angular 6

J'ai une liste de questions comme ci-dessous.

<div *ngFor="let question of questionList">
    {{question.question.query}}

    <br>
    <div *ngFor="let option of question.options">
      <input type="radio" value="{{option.id}}" [(ngModel)]="question.selected.id">{{option.text}}
      <br>
    </div>
    {{question.selected | json}}

    <br>
    <br>


</div>

Mon intention est de lister les questions avec les options sous forme de boutons radio. Chaque fois que quelqu'un sélectionne une option, l'identifiant de l'option sélectionnée doit être attribué à "selected.id" qui est associé à cette question.

Voici la partie HTML.

  public questionList = [
    {
      question:{
        id: "Q1",
        query:"query 1"
      },
      options:[
        {
          id: "opt1",
          text: "Q1_opt1"
        },
        {
          id: "opt2",
          text: "Q1_opt2"
        }
      ],
      selected:{
        id:"",
        text:""
      }
    },

    {
      question:{
        id: "Q2",
        query:"query 2"
      },
      options:[
        {
          id: "opt1",
          text: "Q2_opt1"
        },
        {
          id: "opt2",
          text: "Q2_opt2"
        }
      ],
      selected:{
        id:"",
        text:""
      }
    }
  ];

typescript angular angular6

0 commentaires

3 Réponses :

2
votes

Il manque l'attribut nom à la radio. Le nom doit être unique pour un ensemble d'options.

Dans votre cas d'utilisation où les boutons radio sont générés dynamiquement, vous pouvez utiliser l'index de la boucle pour définir nom comme ceci -

<div *ngFor="let question of questionList; let i = index">
    {{question.question.query}}

    <br>
    <div *ngFor="let option of question.options; let j = index">
      <input type="radio" [value]="option?.id" [(ngModel)]="question.selected.id" [name]='"abc"+i+j'>{{option.text}}
      <br>
    </div>
    {{question.selected | json}}
</div>

Exemple de travail a>

4 commentaires

merci ... qui a fonctionné. une autre question ... est-il possible que je puisse attribuer l'option elle-même à "sélectionné" au lieu de option.id?

je pense que "" abc "+ i" est plus que suffisant ... mes boutons radio sont oui / non ... je veux qu'un seul soit sélectionné à la fois.

oui "abc" + i " devrait fonctionner. Je n'ai pas compris votre prochaine question, pouvez-vous expliquer un peu plus?

dans une application réelle, "l'option" est plus compliquée que celle donnée ici .. elle contient des détails comme la pondération ... lorsque j'envoie la réponse soumise au serveur backend, je voudrais également ajouter ces détails au "sélectionné". par exemple .. dans ce cas, vous pouvez voir que le champ "texte" est manquant dans "sélectionné". comment puis-je le peupler? un moyen facile d'angulaire?

3
votes

Attribuez un nom au bouton radio

<div *ngFor="let question of questionList; let i = index">
    {{question.question.query}}

    <br>
    <div *ngFor="let option of question.options">
      <input type="radio" [name]= "i" value="{{option.id}}" [(ngModel)]="question.selected.id">{{option.text}}
      <br>
    </div>
    {{question.selected | json}}

    <br>
    <br>
</div>

5 commentaires

Cela ne devrait pas fonctionner, avez-vous essayé cela ?, Comme question.id pour l'option est différent mais le nom doit être le même pour un ensemble particulier de boutons radio.

fait le changement. Désolé mon mauvais.

Buddy, encore une fois, cela ne fonctionnera pas. Essayez simplement votre réponse sur votre machine

cela fonctionnera car toutes les options auront le même identifiant de la ième boucle

plus tôt dans votre mise à jour, il n'y a pas i défini, c'est pourquoi je commente

0
votes

In your array id is same thats why its selecting the option button of other array.

you can try this 

//HTMl code

<div *ngFor="let question of questionList">
    {{question.question.query}}

    <br>
    <div *ngFor="let option of question.options">
      <input type="radio" [value]="option" [(ngModel)]="question.selected">{{option.text}}
      <br>
    </div>
    {{question.selected | json}}

    <br>
    <br>


</div>

0 commentaires