web-dev-qa-db-fra.com

Comment se lier aux boutons radio dans angular2 beta 6

Comment obtient-on une liaison de bouton radio dans la version 6?

J'ai trouvé un bon plnkr pour la bêta 0 (voir http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview ), mais lorsque j'essaie de le mettre à jour vers la version 6, il casse horriblement (voir http: //plnkr.co/edit/voU933?p=preview ).

J'ai jeté un coup d'oeil au commit qui a ajouté le support intégré pour les options radio (voir https://github.com/angular/angular/commit/e725542 ), qui donne cet exemple

@Component({
  template: `
    <input type="radio" name="food" [(ngModel)]="foodChicken">
    <input type="radio" name="food" [(ngModel)]="foodFish">
  `
})
class FoodCmp {
  foodChicken = new RadioButtonState(true, "chicken");
  foodFish = new RadioButtonState(false, "fish");
}

mais mes tentatives pour faire ce travail ont jusqu'à présent abouti tout à fait comme mon échec plnkr.

angularangular2-forms
14
Emdot

Mettre à jour

La radio fonctionne bien dans RC.4 et dans le nouveau module de formulaires .Voir par exemple Plunker dans https://stackoverflow.com/a/38590919/217408

Original

Plusieurs problèmes.

L'utilisation de <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.min.js"></script> a provoqué une exception. Je m'en suis débarrassé en supprimant `min.

La radio lie la valeur {checked: true} au lieu de value. Ceci est évidemment un bug et probablement le même que ceux-ci

Je l'ai eu avec une solution de contournement moche. Voir https://plnkr.co/edit/988PSJKXCfrUXfLOGgyg?p=preview

    <input type="radio" [ngModel]="{checked: model.sex == 'male'}" (ngModelChange)="model.sex='male'"  name="sex" value="male">Male<br>
    <input type="radio" [ngModel]="{checked: model.sex == 'female'}"  (ngModelChange)="model.sex='female'" name="sex" value="female">Female
18
Günter Zöchbauer

Pour tous ceux qui lisent ceci, les formulaires ont changé et il en va de même pour les boutons radio de la version récente (RC 3). Plus besoin de trucs maintenant :) 

Ce PR ajoute la possibilité pour les boutons radio de partager un FormControl exemple. Cela signifie que vous n'avez plus besoin de créer un RadioButtonState gérer les boutons radio.

Avant:

<form #f="ngForm">
   <input type="radio" name="food" [(ngModel)]="foodChicken">
    <input type="radio" name="food" [(ngModel)]="foodFish">
</form>

{{ f. value | json }}      // { foodChicken: {value: 'chicken', checked: false}, foodFish: {value: 'fish', checked: true} }
class MyComp {
   foodChicken = new RadioButtonState(false, 'chicken');
   foodFish = new RadioButtonState(true, 'fish');
}

Après:

<form #f="ngForm">
   <input type="radio" name="food" [(ngModel)]="food" value="chicken">
   <input type="radio" name="food" [(ngModel)]="food" value="fish">
</form>

{{ f. value | json }}      // { food: 'fish' }
class MyComp {
   food = 'fish';
}

voir https://github.com/angular/angular/pull/9228

8
Adrien Pavillet

Peut-être pouvez-vous vous débarrasser deux fois des valeurs d'entrée (ngModelChange) et de codage en utilisant l'événement (change):

<input type="radio" [ngModel]="{checked: model.sex == 'male'}" (change)="model.sex=$event.target.value"  name="sex" value="male">Male<br>
<input type="radio" [ngModel]="{checked: model.sex == 'female'}" (change)="model.sex=$event.target.value" name="sex" value="female">Female

Mise à jour de la démo plnkr.co: https://plnkr.co/edit/NiN83eCzMD3V6oe88Obg?p=preview

2
martin

J'ai créé une version en utilisant simplement un événement click sur les éléments chargés, en passant la valeur de la sélection à la fonction "getSelection" et en mettant à jour le modèle.

Dans votre modèle:

<ul> <li *ngFor="let p of price"><input type="radio" name="price" (click)="getValue(price.value)" value="{{p}}" #price> {{p}} </li> </ul>

Ta classe:

export class App {

  price:string;

  price = ["1000", "2000", "3000"];

  constructor() {   }

  model = new SomeData(this.price);

  getValue(price){
    this.model.price = price;
  }
}

Voir exemple: https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

0
MrLukrative