CODEWITHSUNDEEP
javascriptangular
Kayo Lima
Kayo Lima

Reputation: 740

Angular 2 RadioButton Checked

With the old forms I could set checked the radio button like this:

<div class="radio" *ngFor="let transport of transports">
  <label>
   <input type="radio" name="transport" [ngModel]="{checked: transport.id == selectedTransport.id}" (change)="onTransportChange(transport)"> {{ transport.name }}
  </label>
</div>

With the new angular forms I couldn't achieve this with [ngModel]="{checked:''}", but I can use [checked], then I tried to do:

<input type="radio" name="transport" [checked]="transport.id == selectedTransport.id"> {{ transport.name }}

And this works, but if I set [ngModel] this doesn't check anymore:

<input type="radio" name="transport" [checked]="transport.id == selectedTransport.id" [ngModel]="transport" (change)="onTransportChange(transport)"> {{ transport.name }}

Edit:

Plunker with old forms: http://plnkr.co/edit/zu4j9MpALIgCT9JHuIPz?p=preview

Plunker with new forms: http://plnkr.co/edit/cWCp5d122h3wvSRa8AYQ?p=preview

Anyone can help me with this? Thanks!

Upvotes: 2

Views: 2267

Answers (1)

Rvach.Flyver
Rvach.Flyver

Reputation: 304

Try to specify value attributes. And do not forget that in case of radio buttons Model is not supposed to contain boolean value but should contain radio specific values like:

  <input type="radio" name="food" value="beef" [(ngModel)]="myFood"> Beef
  <input type="radio" name="food" value="lamb" [(ngModel)]="myFood"> Lamb
  <input type="radio" name="food" value="fish" [(ngModel)]="myFood"> Fish

In this case you do not need [checked] attribute.

Upvotes: 1

Related Questions