Angular: How to get data from radio button group and pass it as a parameter to a method?

Question

I have a two-choice radio group that I want to get a selected value of and pass it as one of the parameters to navigate to. In my earlier semi-related question someone suggested this solution: Angular2 - Radio Button Binding but I've been trying and failing to use it:

search.component.html:

 <form autocomplete="on" class="form-inline">
<input style="border-color: white; max-width: 300px" name="name" autofocus type="text" #name placeholder="Name..."
       class="form-control">
<div class=" btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn  btn-toggle active">
    <input type="radio" [(ngModel)]="realm" name="realm" [ng-value]="'Feronis'" autocomplete="off" checked> Feronis
  </label>
  <label class="btn  btn-toggle">
    <input type="radio" [(ngModel)]="realm" name="realm" [ng-value]="'Angrathar'" autocomplete="off"> Angrathar
  </label>
</div>
<button (click)="onSearch(name.value,realm)" class="btn btn-search">
  <span class="fa fa-search"></span></button>

I also tried with ngValue and value.

search.component.ts:

export class SearchComponent implements OnInit {

     realm: string;

onSearch(nameIn: string, realmIn: string) {
    console.log(this.realm); // undefined
    let nameCase = nameIn.charAt(0).toUpperCase() + 
                      nameIn.slice(1).toLowerCase();
    let realmCase = realmIn.charAt(0).toUpperCase() + // realmIn also undefined
                      realmIn.slice(1).toLowerCase();
    this.router.navigate(['/character', realmCase, nameCase])
}}

Can't bind to 'ngValue' since it isn't a known property of 'input'.

I also have imports for import {FormsModule} from "@angular/forms"; in app.module.ts and search.component.ts

ng-value is not a valid property on input element, you have to instead use value property in either [value]="expressnion" or value="actual-value" way. — Varun Singh, Feb 01 '18 at 09:58
@varunsingh I'll copy my other comment: I get `ERROR TypeError: Cannot read property 'charAt' of undefined` when I do `onSearch(name.value,realm)` with `value="Feronis"`. The console.log is also undefined — Asalas77, Feb 01 '18 at 10:01

Pardeep Jain · Answer 1 · 2018-02-01T10:25:43.973

2

Simply use value instead of [ng-value]

for example

value="Feronis"

Because as you specify [ng-value]="'Feronis'" here you trying attribute binding with static string which is equal to simply assign of value using value attribute like this

value="Feronis"

Solution for : ERROR TypeError: Cannot read property 'charAt' of undefined

No need to send value of radio selected as param just fetch the value using this.realm like this

console.log(nameIn, this.realm);

and your search function looks like

(click)="onSearch(name.value)"

Working code

<form autocomplete="on" class="form-inline">
    <input style="border-color: white; max-width: 300px" name="name" autofocus type="text" #name placeholder="Name..." class="form-control">
    <div class=" btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn  btn-toggle active">
        <input type="radio" [(ngModel)]="realm" name="realm" value="Feronis" autocomplete="off" checked> Feronis
      </label>
        <label class="btn  btn-toggle">
        <input type="radio" [(ngModel)]="realm" name="realm" value="Angrathar" autocomplete="off"> Angrathar
      </label>
    </div>
    <button (click)="onSearch(name.value)" class="btn btn-search">
      <span class="fa fa-search"></span></button>
</form>

onSearch(nameIn: string) {
    console.log(nameIn, this.realm);
 }

edited Feb 01 '18 at 10:25

answered Feb 01 '18 at 09:44

Pardeep Jain

84,110
37
165
215

I get `ERROR TypeError: Cannot read property 'charAt' of undefined` when I do `onSearch(name.value,realm)` with `value="Feronis"`. The console.log is also undefined – Asalas77 Feb 01 '18 at 09:57
Unfortunately no change, the console log of `console.log('name: '+nameIn + ', realm: '+this.realm);` is still `name: test, realm: undefined` – Asalas77 Feb 01 '18 at 10:23
Please check my code above just a tip : never use `+` in console instead use `,` – Pardeep Jain Feb 01 '18 at 10:26
The code you posted is just like what I had when I made my previous comment. Just to test I did the same to `name` using ngModel and `this.name` and `onSearch()` with no params and this part works: `nameVariable: hgfhgf , realm: undefined` – Asalas77 Feb 01 '18 at 10:34
i think something else causing issue on your end. on my end everything is working fine :) – Pardeep Jain Feb 01 '18 at 10:37
Well I'm vary new to Angular so perhaps I'm missing something essential that you wouldn't even think of. Would you take a look at full code? https://github.com/adamzimnyy/SunwellFront/tree/master/src/app/search – Asalas77 Feb 01 '18 at 10:40

score 2 · Accepted Answer · answered Feb 01 '18 at 11:42

2

Here is the working example: https://plnkr.co/edit/9YOV50bV1E9F9tH3Uw8a

It seems everything is fine except the fact that you want first radio button to be pre-selected.

You are doing pre-selection using checked property. Now since you are using [ngModel]="realm", ngModel sets initial value. In your case initial value of realm is undefined, none of the radion button gets pre-selected.

Set some value in realm in your class, to get pre-selected radio button as shown in plunker above.

answered Feb 01 '18 at 11:42

Varun Singh

310
2
10

Ok I really don't understand it now, I copied everything from you plunker into a new component in my project and it stopped working... I only get the default value – Asalas77 Feb 01 '18 at 13:38
I'll accept this as an answer even though it didn't work in my project. It works on plunker so I guess the issue is in something else. I ended up ditching the radio buttons and replaced them with a single button that toggles between two values. – Asalas77 Feb 01 '18 at 17:00

Angular: How to get data from radio button group and pass it as a parameter to a method?

2 Answers2