Come eseguire il binding ai pulsanti di opzione in angular2 beta 6

Question

Come si ottiene il binding del pulsante di scelta nella beta 6?

Ho trovato un ottimo plnkr per la beta 0 (vedere http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview), ma quando provo ad aggiornarlo alla versione beta 6 si interrompe in modo orribile (vedere http://plnkr.co/edit/voU933?p=preview).

ho preso uno sguardo al commit che ha aggiunto il supporto integrato per le opzioni radio (si veda https://github.com/angular/angular/commit/e725542), che dà questo esempio

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

ma i miei tentativi di fare quel lavoro hanno finora finiti abbastanza come il mio fallito plnkr.

Answer 1

Aggiornamento

Radio sta lavorando bene in RC.4 e il nuovo modulo forme. Si veda ad esempio il Plunker in https://stackoverflow.com/a/38590919/217408

originali

diversi problemi.

L'utilizzo di <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.min.js"></script> ha causato un'eccezione. Mi sono liberato rimuovendo `min.?

La radio associa il valore {checked: true} anziché value. Si tratta ovviamente di un bug e probabilmente lo stesso in quanto questi

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

ho preso a lavorare con una soluzione brutta . Vedere 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

Forse si può sbarazzarsi dei valori di input (ngModelChange) e duri che codificano per due volte con (change) evento:

<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 

Aggiornato plnkr.co demo: https://plnkr.co/edit/NiN83eCzMD3V6oe88Obg?p=preview

Answer 3

Ho creato un versione utilizzando solo un evento click sugli elementi caricati e passando il valore della selezione nella funzione "getSelection" e aggiornando il modello.

Nel modello:

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

La classe:

export class App { 

    price:string; 

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

    constructor() { } 

    model = new SomeData(this.price); 

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

vedi esempio: https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

Answer 4

Per chiunque la lettura di questo, le forme sono cambiati e così hanno pulsanti di opzione in recents rilascio (RC 3), non c'è bisogno di trucchi ora :)

Questo PR aggiunge la possibilità per i pulsanti di opzione di condividere un'istanza FormControl . Ciò significa che non è più necessario creare un RadioButtonState per gestire i pulsanti di opzione.

Prima:

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

Dopo:

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

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