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
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);
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.