Angular 9/8 Radio Button on Form Submit

Today, We want to share with you Angular 9/8 Radio Button on Form Submit.In this post we will show you angular 4 reactive forms radio button checked, hear for angular-radio-buttons-demo-reactive-forms we will give you demo and example for implement.In this post, we will learn about radio button in angular 9/8 reactive form with an example.

Angular 9/8 Radio Button on Form Submit

There are the Following The simple About angular radio button Full Information With Example and source code.

As I will cover this Post with live Working example to develop Radio Buttons Reactive Forms with Angular 7|8|9, so the how to use radio button in angular 9/8? is used for this example is following below.

Also Read This πŸ‘‰   Bind Array to Radio Button List using Angular Example

Angular 9/8 Radio Button Example

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

Phase 2: Form with ngModel

src/app/app.component.html


<div class="bdy-cart container dsp">
    <h1>Angular Radio Button Example - pakainfo.com</h1>
        
    <form [formGroup]="form" (ngSubmit)="submit()">
           
        <div class="corona form-group lg10">
            <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>

Phase 3: 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);
  }
  
}

Free Live Chat for Any Issue
Web Programming Tutorials Example with Demo

Read :

Also Read This πŸ‘‰   How to Integration PayPal Payment Gateway in PHP?

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about how to use radio button in angular 9/8 example with demo steo by step.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Rate this post