javascript - Angular 2 Radio Button 2 way Binding - Stack Overflow

admin管理员组

文章数量:1302403

I have 3 radio buttons as follows:

.html:

<input type="radio" name = "options" value="All" [checked]='selectedRadioButtonValue' (input)='selectedRadioButtonValue=$event.target.value' />
<span class="radioClass">{{"All("+all+")"}}</span>

<input type="radio" name = "options" value="Male" [checked]='selectedRadioButtonValue' (input)='selectedRadioButtonValue=$event.target.value' />
<span class="radioClass">{{"Male("+male+")"}}</span>

<input type="radio" name = "options" value="Female" [checked]='selectedRadioButtonValue' (input)='selectedRadioButtonValue=$event.target.value' />
<span class="radioClass">{{"Female("+female+")"}}</span>

I dont want to use [(ngModel)] because of package issues .

I want to use [] and () traditional ways .

Now, the thing is values are not getting changed in the selectedRadioButtonValue . Whats the issue here?

export class EmployeeComponent {

selectedRadioButtonValue: string = "All";

}

I have 3 radio buttons as follows:

.html:

<input type="radio" name = "options" value="All" [checked]='selectedRadioButtonValue' (input)='selectedRadioButtonValue=$event.target.value' />
<span class="radioClass">{{"All("+all+")"}}</span>

<input type="radio" name = "options" value="Male" [checked]='selectedRadioButtonValue' (input)='selectedRadioButtonValue=$event.target.value' />
<span class="radioClass">{{"Male("+male+")"}}</span>

<input type="radio" name = "options" value="Female" [checked]='selectedRadioButtonValue' (input)='selectedRadioButtonValue=$event.target.value' />
<span class="radioClass">{{"Female("+female+")"}}</span>

I dont want to use [(ngModel)] because of package issues .

I want to use [] and () traditional ways .

Now, the thing is values are not getting changed in the selectedRadioButtonValue . Whats the issue here?

export class EmployeeComponent {

selectedRadioButtonValue: string = "All";

}

• javascript
• jquery
• angular

Share Follow edited Nov 25, 2017 at 9:27 bamtheboozle 6,43622 gold badges2020 silver badges3232 bronze badges asked Nov 25, 2017 at 9:01 user1400915user1400915 1,94377 gold badges3030 silver badges5555 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

For two way data binding its as same as all others use this syntax [(ngModel)]

<div class="form-group">
<label>Gender:</label> 
&nbsp;

<label class="radio-inline">
    <input type="radio" name="optradio" value='Male' [(ngModel)]="employee.gender" >Male
</label>

<label class="radio-inline">
    <input type="radio" name="optradio" value='Female' [(ngModel)]="employee.gender" >Female
</label>

without ngModel Demo :

using change event binding and the value of checked attribute must be a boolean not a string because strings are truthy :

<input type="radio" name = "options" value="All" [checked]="selectedRadioButtonValue === 'All'" (change)='selectedRadioButtonValue=$event.target.value' />
<span class="radioClass">{{"All("+all+")"}}</span>

<input type="radio" name = "options" value="Male" [checked]="selectedRadioButtonValue === 'Male' " (change)='selectedRadioButtonValue=$event.target.value' />
<span class="radioClass">{{"Male("+male+")"}}</span>

<input type="radio" name = "options" value="Female" [checked]="selectedRadioButtonValue === 'Female'" (change)='selectedRadioButtonValue=$event.target.value' />
<span class="radioClass">{{"Female("+female+")"}}</span>

本文标签： javascriptAngular 2 Radio Button 2 way BindingStack Overflow