How to get radiobutton value in angular 2?

Question

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

Radio buttons were improved a lot in recent versions. I'd suggest you upgrade to RC.4 and the new forms module. — Günter Zöchbauer, Jul 20 '16 at 09:11
@GünterZöchbauer thank you for your response. All you are saying is to use formConrol? — The Hungry Dictator, Jul 20 '16 at 09:22
You can just use `ngModel` but it's handled (provided) by the forms module and how `ngModel` works with `` has changed and was simplified quite a bit. — Günter Zöchbauer, Jul 20 '16 at 09:25
Please create a Plunker that allows to reproduce. Plunker provides a nice Angular2 TS template using the `New` button in the editor. — Günter Zöchbauer, Jul 20 '16 at 09:35
@GünterZöchbauer i have added plunkr. I know which is not working. I am bindin data from firebase but as in plunkr i have used static data. — The Hungry Dictator, Jul 20 '16 at 10:40

score 2 · Accepted Answer · answered Jul 21 '16 at 06:43

2

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 Jul 21 '16 at 06:43

Günter Zöchbauer

623,577
216
2,003
1,567

Hi thank you for the answer. But as i am adding it in the `main.ts` Soon that component is not getting hanged. – The Hungry Dictator Jul 21 '16 at 07:30
Sorry, I don't understand "Soon that component is not getting hanged.". Are you importing forms stuff from `@angular/common` anywhere in your app? You need to migrate all your forms stuff to the new form if you want to use what I suggested in my answer. – Günter Zöchbauer Jul 21 '16 at 07:35
Actually what i am saying is after i tried this in my `main.ts`. My page starts hanging too much. I cant do anything in that page. Rest of the components are working very fine. – The Hungry Dictator Jul 21 '16 at 07:38
If you can extract that in Plunker (as small as possible) that would be great. Otherwise it's hard to guess. – Günter Zöchbauer Jul 21 '16 at 07:43
I have created plunkr but in plunkr its working everything good. In my machine specifically this page gets hanged. http://plnkr.co/edit/Y0vWjdX0EZu6UhBekH5O?p=preview PS: Click on "TO". It will show you the list. – The Hungry Dictator Jul 21 '16 at 08:57
Can you investigate in devtools what's going on? (profiler, memory usage, ...) – Günter Zöchbauer Jul 21 '16 at 09:01
But if i remove `[(ngModel)]` or the two references from `main.ts` it works fine. Still that be an issue of something else? – The Hungry Dictator Jul 21 '16 at 09:44
If it's working in the Plunker I'd say it's caused by something else. – Günter Zöchbauer Jul 21 '16 at 09:45
1

i think the same way. still wondering what will be the issue. :( – The Hungry Dictator Jul 21 '16 at 09:48
Got the solution. It was the pipe that i have used with it. Thank you once again :) – The Hungry Dictator Jul 22 '16 at 08:26
@RonakBhatt Glad to hear :) thanks for the feedback. – Günter Zöchbauer Jul 22 '16 at 08:29

How to get radiobutton value in angular 2?

1 Answers1