Comment lier des boutons radio dans angular2 beta 6

Comment atteindre le bouton radio de liaison en beta 6?

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

J'ai pris un coup d'oeil à la livraison qui a ajouté la prise en charge intégrée pour les options de la radio (voir https://github.com/angular/angular/commit/e725542), ce 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 que les travaux ont jusqu'à présent fini tout à fait comme mon échec plnkr.

Cochez cette exemple de travail de la radio de liste freakyjolly.com/how-to-show-radio-input-listing-in-angular-6

OriginalL'auteur Emdot | 2016-02-26

angular angular2-forms

18

Mise à jour

Radio fonctionne très bien dans RC.4 et les nouvelles formes de module.
Voir, par exemple, la Plunker dans https://stackoverflow.com/a/38590919/217408

Original

Plusieurs questions.

À l'aide de <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.min.js"></script> a causé une exception. Je me suis débarrassé de lui par la suppression de " min.?

La radio lie la valeur {checked: true} au lieu de value. C'est évidemment un bug et probablement le même que ces
Je l'ai eu à travailler avec une vilaine solution de contournement. 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
```
Wow, ces liens sont en or! J'étais persuadé que personne n'avait des exemples, mais apparemment, c'est juste que Google n'indexe pas github questions. Je vais y chercher la prochaine fois.

OriginalL'auteur Günter Zöchbauer
8

Pour tous ceux qui lisent ceci, les formes ont changé et ont des boutons radio dans les récents version RC ( 3 ), pas besoin de trucs maintenant 🙂

Ce PR ajoute la possibilité pour les boutons radio pour partager un FormControl
exemple. Cela signifie que vous n'avez plus besoin de créer un RadioButtonState
pour 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

Veuillez ne pas poster une réponse qui se compose essentiellement d'un lien. Inclure les points importants de votre réponse; laisse le lien pour plus d'informations ou en tant que référence.
L'espoir, c'est mieux 🙂

OriginalL'auteur Adrien Pavillet

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

<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

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

OriginalL'auteur martin

0

J'ai créé une version en utilisant seulement un événement de clic sur les éléments chargés et le dépassement de la valeur de la sélection dans la fonction "getSelection" et la mise à jour du 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>

Votre classe:
```
export class App {

  price:string;

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

  constructor() {   }

  model = new SomeData(this.price);

  getValue(price){
    this.model.price = price;
  }
}
```
Voir l'exemple: https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

le plunkr ne fonctionne plus

OriginalL'auteur MrLukrative

-1

  <div class="col-lg-4">
            <div class="form-group">
              <legend class="col-form-legend">Sexo</legend>
              <label class="custom-control custom-radio">
                <input value="macho" [(ngModel)]="pet.sexo" name="pet.sexo1" id="radio1"  type="radio" class="custom-control-input">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Macho</span>
              </label>
              <label class="custom-control custom-radio">
                <input  value="femea"  [(ngModel)]="pet.sexo" name="pet.sexo2" id="radio2"  type="radio" class="custom-control-input">
                <span class="custom-control-indicator"></span>
                <span  class="custom-control-description">Fêmea</span>
              </label>
            </div>
          </div>

Veuillez préciser le contexte.

OriginalL'auteur Jackson Camara

Vous devez vous connecter pour publier un commentaire.