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

Contents

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.

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

Web Programming Tutorials Example with Demo

Read :

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.