How to get radiobutton value in angular 2?

Issue

I am working a project where i need to bind 3 radio buttons per row in table. I am binding this table but somehow its not happening. I am sharing my code what i have done.

table.table
    thead
        tr
            th
                | To
            th
                | Cc
            th
                | Bcc
            th
                | First Name
            th
                | Last Name
            th
                | Phone
            th
                | Email
        tbody
            tr(*ngFor = "let contact of contacts| values")
                td
                    input(type="radio" , [(ngModel)]="contact.value.option", [name]="contact.key", value="to")
                td
                    input(type="radio" , [(ngModel)]="contact.value.option", [name]="contact.key", value="cc")
                td
                    input(type="radio" , [(ngModel)]="contact.value.option", [name]="contact.key", value="bcc")
                td
                    | {{contact.value.fName}}
                td
                    | {{contact.value.lName}}
                td
                    | {{contact.value.phone}}
                td
                    | {{contact.value.email}}

I have tried this How to bind to radio buttons in angular2 beta 6 but its not working.

EDIT As asked in comment. I have created one plunkr.

PS This code is in pug(Jade).

Solution

If you upgrade to RC.4 and the new forms module your code works without change.

import { bootstrap }    from '@angular/platform-browser-dynamic';

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

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

Plunker example

Answered By – Günter Zöchbauer

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.