Wie an Radiobuttons in angular2 beta 6 gebunden werden

Question

Wie erreicht man Radio Button Bindung in Beta 6?

Ich fand eine große PLNKR für Beta 0 (siehe http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview), aber wenn ich versuche, es auf Beta 6 zu aktualisieren, bricht es schrecklich (siehe http://plnkr.co/edit/voU933?p=preview).

nahm ich einen Blick auf dem begeht, dass (siehe https://github.com/angular/angular/commit/e725542), eine integrierte Unterstützung für Radio-Optionen hinzugefügt, die dieses Beispiel

@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"); 
} 

aber meine Versuche geben haben, dass die Arbeit zu machen, ganz so weit am Ende wie mein gescheiterter PLNKR.

Answer 1

aktualisieren

-Radio funktioniert gut in RC.4 und die neuen Formen Modul. zum Beispiel finden Sie in der Plunker in https://stackoverflow.com/a/38590919/217408

Original-

Mehrere Probleme.

Die Verwendung von <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.min.js"></script> verursachte eine Ausnahme. Ich habe es losgeworden, indem ich `min. Das Gerät bindet den Wert {checked: true} anstelle von value. Dies ist offensichtlich ein Fehler und wahrscheinlich die gleiche wie diese

• Radio button data binding and form validation not working
• Cannot select multiple radio buttons in same control group (fest)
• input type=radio not handled correctly by ng-model (fest)
• https://github.com/angular/angular/issues/7642

Ich habe es mit einer hässlichen Abhilfe Arbeits . Siehe 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 

Answer 2

Vielleicht können Sie zweimal der (ngModelChange) und harte Kodierung Eingangswerte loszuwerden mit (change) Ereignis:

<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 

Aktualisiert plnkr.co Demo: https://plnkr.co/edit/NiN83eCzMD3V6oe88Obg?p=preview

Answer 3

Ich habe ein geschaffenes Version, indem Sie nur ein click -Ereignis für die geladenen Elemente verwenden und den Wert der Auswahl in die Funktion "getSelection" übergeben und das Modell aktualisieren.

in Ihrer Vorlage:

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

Ihre Klasse:

export class App { 

    price:string; 

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

    constructor() { } 

    model = new SomeData(this.price); 

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

Siehe Beispiel: https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

Answer 4

Für alle, die dies lesen, haben Formen verändert und so Radiobuttons in recents haben Release (RC 3), keine Tricks mehr nötig :)

Diese PR fügt die Möglichkeit hinzu, dass Optionsfelder eine FormControl Instanz gemeinsam nutzen können. Das bedeutet, dass Sie keinen RadioButtonState mehr erstellen müssen, um Optionsfelder zu verwalten.

Bevor:

<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'); 
} 

Nach:

<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'; 
} 

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

Answer 5

<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>