Angular2 - Bouton Radio De Liaison

utilisation [valeur]="1" au lieu de value="1"

<input name="options" ng-control="options" type="radio" [value]="1"  [(ngModel)]="model.options" ><br/>

<input name="options" ng-control="options" type="radio" [value]="2" [(ngModel)]="model.options" ><br/>

Edit:

Comme suggéré par thllbrg "angulaire 2.1+ utilisation [(ngModel)] au lieu de [(ng-model)] "

Mon manuel de solution de contournement, ce qui implique de mettre à jour manuellement model.options lorsqu'un nouveau bouton radio est sélectionné:

template: `
  <label *ngFor="let item of radioItems">
    <input type="radio" name="options" (click)="model.options = item" 
     [checked]="item === model.options">
    {{item}}
  </label>`

class App {
  radioItems = 'one two three'.split(' ');
  model      = { options: 'two' };
}

Ce Plunker montre ci-dessus, ainsi que la façon d'utiliser un bouton pour changer le bouton d'option sélectionné -- c'est à dire, de prouver que la liaison de données dans les deux sens:

<button (click)="model.options = 'one'">set one</button>

Ce Problème est résolu dans la version Angulaire 2.0.0-rc.4, respectivement dans les formes.

Inclure "@angular/forms": "0.2.0" dans le paquet.json.

Puis étendre votre fichier d'amorçage principal. La partie pertinente de l':

...
import { AppComponent } from './app/app.component';
import { disableDeprecatedForms, provideForms } from '@angular/forms';

bootstrap(AppComponent, [
    disableDeprecatedForms(),
    provideForms(),
    appRouterProviders
]);

J'ai cela en .html et fonctionne parfaitement:
valeur: {{outil de build}}

<form action="">
    <input type="radio" [(ngModel)]="buildTool" name="buildTool" value="gradle">Gradle <br>
    <input type="radio" [(ngModel)]="buildTool" name="buildTool" value="maven">Maven
</form>

Entrée Radio ne semble pas être encore pris en charge.
Il devrait y avoir une radio de la valeur d'entrée de l'accesseur (semblable à de la case à cocher un, où elle définit des "coché" attr ici) mais je n'ai pas trouvé. J'ai donc mis en œuvre un; vous pouvez le vérifier ici.

Voici une solution qui fonctionne pour moi. Il implique le bouton radio de liaison, mais pas de liaison de données de l'entreprise, mais au lieu de cela, la liaison à l'état du bouton radio. Il n'est probablement PAS la meilleure solution pour les nouveaux projets, mais qui est approprié pour mon projet. Mon projet a une tonne de code existant écrit en une autre technologie dont je suis le portage Angulaire. L'ancien code suit un modèle dans lequel le code est très intéressée par l'examen de chaque bouton radio pour voir si il est sélectionné. La solution est une variante de la cliquez sur gestionnaire de solutions, dont certaines ont déjà été évoquées sur un Débordement de Pile.
La valeur ajoutée de cette solution peut être:

1. Fonctionne avec le modèle de l'ancien code que j'ai de travailler avec.
2. J'ai créé une classe d'assistance pour essayer de réduire le nombre de "si" états
   dans le gestionnaire de clic, et à gérer un groupe de boutons radio.

Cette solution implique

1. À l'aide d'un modèle différent pour chaque bouton radio.
2. Réglage de la "vérifié" attribut avec le bouton radio du modèle.
3. Passage du modèle de l'cliqué sur le bouton radio à l'aide de la classe.
4. La classe helper fait que les modèles sont à jour.
5. Au "moment de l'envoi" cela permet à l'ancien code, pour examiner l'état de la
   les boutons radio pour voir ce qui est choisi par l'examen des modèles.

Exemple:

<input type="radio"
    [checked]="maleRadioButtonModel.selected"
    (click)="radioButtonGroupList.selectButton(maleRadioButtonModel)"

...

 <input type="radio"
    [checked]="femaleRadioButtonModel.selected"
    (click)="radioButtonGroupList.selectButton(femaleRadioButtonModel)"

...

Lorsque l'utilisateur clique sur un bouton radio, le selectButton méthode de la classe helper
est appelé. Il est adopté le modèle du bouton radio qui a cliqué.
La classe helper définit le booléen "sélectionné" du passé dans le modèle de vrai, et définit le champ "sélectionnés" de tous les autres bouton radio des modèles de faux.

Lors de l'initialisation du composant doit construire une instance de la classe d'aide avec une liste de tous les bouton radio les modèles du groupe. Dans l'exemple, "radioButtonGroupList" serait une instance de la classe helper dont le code est:

 import {UIButtonControlModel} from "./ui-button-control.model";


 export class UIRadioButtonGroupListModel {

  private readonly buttonList : UIButtonControlModel[];
  private readonly debugName : string;


  constructor(buttonList : UIButtonControlModel[], debugName : string) {

    this.buttonList = buttonList;
    this.debugName = debugName;

    if (this.buttonList == null) {
      throw new Error("null buttonList");
    }

    if (this.buttonList.length < 2) {
      throw new Error("buttonList has less than 2 elements")
    }
  }



  public selectButton(buttonToSelect : UIButtonControlModel) : void {

    let foundButton : boolean = false;
    for(let i = 0; i < this.buttonList.length; i++) {
      let oneButton : UIButtonControlModel = this.buttonList[i];
      if (oneButton === buttonToSelect) {
        oneButton.selected = true;
        foundButton = true;
      } else {
        oneButton.selected = false;
      }

    }

    if (! foundButton) {
      throw new Error("button not found in buttonList");
    }
  }
}

Solution la plus simple et la solution de contournement:

<input name="toRent" type="radio" (click)="setToRentControl(false)">
<input name="toRent" type="radio" (click)="setToRentControl(true)">

setToRentControl(value){
    this.vm.toRent.updateValue(value);
    alert(value); //true/false
}

Autant que cette réponse pourrait ne pas être la meilleure en fonction de votre cas d'utilisation, il fonctionne. Au lieu d'utiliser le bouton Radio pour les Mâles et de Femelles de sélection, à l'aide de la <select> </select> fonctionne parfaitement, à la fois pour l'enregistrement et l'édition.

<select formControlName="gender" name="gender" class="">
  <option value="M">Male</option>
  <option value="F">Female</option>
</select>

Ci-dessus doit faire bien, pour l'édition à l'aide de FormGroup avec patchValue. Pour la création, vous pouvez utiliser [(ngModel)] au lieu de la formControlName. Fonctionne encore.

Les travaux de plomberie impliqué avec le bouton radio one, j'ai choisi d'aller avec le sélectionner à la place. Visuellement et UX-sage, il ne semble pas être le meilleur, mais à partir d'un point de vue du développeur, c'est une tonne plus facile.