Hello Devs,

In this tutorial, we are going to learn angular 10 radio button ng model example.

Given below are two examples to get value of selected radio button by click on submit button and another get checked radio button value in on change value.

Follow this step by step guide given below:




Example 1: 

Get Checked Radio Button on Form Submit


Import FormsModule

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

  

import { AppComponent } from './app.component';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

  

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    ReactiveFormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }



Form with ngModel

src/app/app.component.html

<div class="container">

    <h1>Angular Radio Button Example - Rathorji.in</h1>

        

    <form [formGroup]="form" (ngSubmit)="submit()">

           

        <div class="form-group">

            <label for="gender">Gender:</label>

            <div>

              <input id="male" type="radio" value="male" name="gender" formControlName="gender">

              <label for="male">Male</label>

           </div>

  

           <div>

              <input id="female" type="radio" value="female" name="gender" formControlName="gender">

              <label for="female">Female</label>

           </div>

              

            <div *ngIf="f.gender.touched && f.gender.invalid" class="alert alert-danger">

                <div *ngIf="f.gender.errors.required">Name is required.</div>

            </div>

        </div>

        

        <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>

    </form>

</div>



updated Ts File

src/app/app.component.ts

import { Component } from '@angular/core';

import { FormGroup, FormControl, Validators} from '@angular/forms';

  

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  

  form = new FormGroup({

    gender: new FormControl('', Validators.required)

  });

  

  get f(){

    return this.form.controls;

  }

  

  submit(){

    console.log(this.form.value);

  }

  

}


Run this command:

ng serve

'


Example 2: 

Get Checked Radio Button on Change Event


Import FormsModule

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

  

import { AppComponent } from './app.component';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

  

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    ReactiveFormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }


Form with ngModel

src/app/app.component.html

<div class="container">

    <h1>Angular Radio Button Example - Rathorji.in</h1>

       

    <form [formGroup]="form" (ngSubmit)="submit()">

           

        <div class="form-group">

            <label for="gender">Gender:</label>

            <div>

              <input id="male" type="radio" value="male" name="gender" formControlName="gender" (change)="changeGender($event)">

              <label for="male">Male</label>

           </div>

   

           <div>

              <input id="female" type="radio" value="female" name="gender" formControlName="gender" (change)="changeGender($event)">

              <label for="female">Female</label>

           </div>

              

            <div *ngIf="f.gender.touched && f.gender.invalid" class="alert alert-danger">

                <div *ngIf="f.gender.errors.required">Name is required.</div>

            </div>

        </div>

        

        <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>

    </form>

</div>



updated Ts File

src/app/app.component.ts

import { Component } from '@angular/core';

import { FormGroup, FormControl, Validators} from '@angular/forms';

   

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

   

  form = new FormGroup({

    gender: new FormControl('', Validators.required)

  });

   

  get f(){

    return this.form.controls;

  }

   

  submit(){

    console.log(this.form.value);

  }

 

  changeGender(e) {

    console.log(e.target.value);

  }

   

}


Run this command:

ng serve


I hope this example helps you.