Clever Geek Handbook

How to bind a two way radio button in angular 2

Here is my code. In the name I used ngModel so its two way data binding, but in the switch how I used ngModel for two way data binding.

   <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !lastname.valid }">
                    <label for="lastname">Last Name</label>
                    <input type="text" class="form-control" name="last_name" [(ngModel)]="employee.last_name" #lastname="ngModel" required />
                    <div *ngIf="f.submitted && !lastname.valid" class="help-block">Last Name is required</div>
                </div>
                <div class="form-group">
                    <label>Gender:</label> &nbsp;
                    <label class="radio-inline">
                    <input type="radio" name="optradio" [checked]="employee.gender == 'Male'" >Male
                </label>
                    <label class="radio-inline">
                     <input type="radio" name="optradio" [checked]="employee.gender == 'Female'" >Female
                </label>
                </div>
+4


source to share


3 answers


For two-way data linking it just like everyone else, use this syntax [(ngModel)]

Replace the code block below:



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

</div>
+7


source


You can try this

 <div class="form-group">
                    <label>Gender:</label> &nbsp;
                    <label class="radio-inline">
                    <input type="radio" name="gender" [(ngModel)]="employee.gender"
[value]='Male' [checked]="employee.gender == 'Male'" >Male
                </label>
                    <label class="radio-inline">
                     <input type="radio" name="gender" [(ngModel)]="employee.gender"
[value]='Female' [checked]="employee.gender == 'Female'" >Female
                </label>
                </div>


Also, you forgot to add the property [value]

to your inputs and change name

to input

togender

+1


source 


<div class="form-group col-md-6"> 
    <label>Gender</label> <hr>

    <input type="radio" value="Male" name="Gender" [checked]="service.formData.Gender === 'Male'" [ngModel]="service.formData.gender" required #Gender="ngModel"> Male
    <input type="radio" value="Female" name="Gender" [checked]="service.formData.Gender === 'Female'" [ngModel]="service.formData.gender" required #Gender="ngModel"> Female

</div>
0


source






More articles:


All Articles