Radio Buttons in ngForm Angular2

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.

The question has an answer here. https://stackoverflow.com/a/49078441/12376898 — Morsh, Nov 15 '19 at 12:30
Does this answer your question? [Angular 5 Reactive Forms - Radio Button Group](https://stackoverflow.com/questions/49078286/angular-5-reactive-forms-radio-button-group) — ButchMonkey, Nov 15 '19 at 12:35
do you want to trigger an event upon change, or to retrieve the value when submitting? — Rafi Henig, Nov 15 '19 at 12:52

score 1 · Answer 1 · edited Nov 15 '19 at 13:03

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

score 1 · Accepted Answer · answered Nov 15 '19 at 12:46

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.

score 1 · Answer 3 · answered Nov 15 '19 at 13:05

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

Radio Buttons in ngForm Angular2

3 Answers3