Radio Buttons in ngForm Angular2 - html

Question

I have two radio buttons on my HTML page for gender selection (M or F).
How to retrieve which button was clicked in my typescript file? Here's the code
<form>
<label> Gender </label>
<br>
<input type="radio" required name='gender' value='Male' [(ngModel)]='gender'>Male
<br>
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender'>Female
<br>
<button id="signup" class="btn btn-primary" type="submit">Signup</button>
</form>
On clicking the button, I want to assign M or F to a string in my typescript file.

Answer 1

You code is correct. No need to change anything.
This is your template code.
<form (ngSubmit)="onSubmit()">
<label>Gender</label>
<input type="radio" required name='gender' value='Male' [(ngModel)]='gender'>Male
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender'>Female
<button id="signup" type="submit">Signup</button>
</form>
In your .ts file,
export class TestComponent implements OnInit {
gender: string = "Male";
onSubmit() {
console.log(gender);
}
}
This will give you the selected gender value.
Because you have used two way binding. It updates the ngModel whenever the input changes.

Answer 2

you can retrieve which button click by add ngModelChange method
<label> Gender </label>
<br>
<input type="radio" required name='gender' value='Male' [(ngModel)]='gender' (ngModelChange)="youMethodName(gender)">Male
<br>
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender' (ngModelChange)="youMethodName(gender)">Female
<br>
</div>
<button id="signup" class="btn btn-primary" type="submit" >Signup</button> </form>
in your ts file
youMethodName(model) {
console.log("TCL: youMethodName -> model", model)
}

Answer 3

Although, answer is already accepted. I want to give solution of this problem if you do not want to use Two way data binding. this way is useful for breaking down two way data binding. So, there is no need for [(ngModel)] . Complete Working Demo found here in StackBlitz Link
Your HTML ...
<form>
<fieldset id="group1">
<input type="radio" (change)="handleChange($event)" name="group1" value="Male"/>Male
<input type="radio" (change)="handleChange($event)" name="group1" value ="Female"/> Female
</fieldset>
<div *ngIf="_prevSelected"> {{ _prevSelected}} </div>
<button (click)="click()">Show</button>
<div *ngIf="clicked"> <span> selected value is {{_prevSelected}} </span></div>
</form>
Your class file is..
private _prevSelected: any;
clicked:boolean;
handleChange(evt) {
let target = evt.target;
if (target.checked) this._prevSelected = target.value;
}
click(){
this.clicked =true;
}