In this post we’ll see how to use radio buttons in Angular form. We’ll see examples of adding radio button to both template-driven and reactive form in Angular.
Table of contents
Radio button in template driven form example
In this Angular template driven form example we’ll have a form with two input fields for name and email, a date picker for picking date and a group of radio buttons to select membership type.
Data Model (member.model.ts)
Member class defines the data model reflected in the form.
export class Member {
name: string;
mail: string;
membershipDate: Date;
membershipType: string;
constructor(name: string, mail: string, membershipDate: Date, membershipType: string) {
this.name = name;
this.mail = mail;
this.membershipDate = membershipDate;
this.membershipType = membershipType;
}
}
Template (app.component.html)
<div class="container">
<h1>Membership Form</h1>
<form (ngSubmit)="onSubmit()" #membershipForm="ngForm">
<div class="row mb-3">
<div class="col-12 col-md-6">
<label for="name">Name</label>
<input type="text" class="form-control"
id="name"
ngModel name="name">
</div>
</div>
<div class="row mb-3">
<div class="col-12 col-md-6">
<label for="email">email</label>
<input type="email" class="form-control"
id="email"
ngModel name="email">
</div>
</div>
<div class="row mb-3">
<div class="col-12 col-md-6">
<label for="mdate">Membership Date</label>
<input type="date" class="form-control" id="mdate"
[ngModel]="currentDate | date:'yyyy-MM-dd'" name="mdate">
</div>
</div>
<div class="row mb-3">
<div class="col-12 col-md-6">
<label>Membership Type</label>
<div class="radio" *ngFor="let mtype of membershiptypes">
<label for="type">
<input type="radio" name="type"
ngModel [value]="mtype">
{{mtype}}
</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
<hr>
<div *ngIf="submitted">
<div class="row">
<div class="col-12 col-md-6">
<p>Name: {{member.name}}</p>
<p>email: {{member.mail}}</p>
<p>Membership Date: {{member.membershipDate | date:'dd/MM/yyyy'}}</p>
<p>Membership Type: {{member.membershipType}}</p>
</div>
</div>
</div>
</div>
- In the form Bootstrap 5 is used for styling.
- For radio button, options are added using ngFor which iterates over an array called membershiptyes defined in the Component class.
- class="radio" is a Bootstrap class added for styling.
- ngModel is placed to indicate that this element is a form control.
- [value]="mtype" sets the value of the button to one of the values in each iteration.
- {{mtype}} displays the associated text with each button.
- If you want one of the radio button to be selected by default then you can use one way binding with ngModel.
<input type="radio" name="type" [ngModel]="defaultMemberType" [value]="mtype">defaultMemberType is defined in the Component class with one of the values.defaultMemberType="Silver"
Component class (app.component.ts)
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Member } from './member.model';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
@ViewChild('membershipForm') memberForm!: NgForm;
membershiptypes = ['Silver', 'Gold', 'Platinum'];
currentDate = new Date();
//defaultMemberType="Silver"
member = new Member('', '', new Date(), '');
submitted = false;
onSubmit(){
this.submitted = true;
this.member.name = this.memberForm.value.name;
this.member.mail = this.memberForm.value.email;
this.member.membershipDate = this.memberForm.value.mdate;
this.member.membershipType = this.memberForm.value.type;
}
}
Radio button in reactive form example
With reactive form creation of FormGroup and FormControl is done explicitly in the Component class (Type script code). If we are creating the same form as done in template driven from then the component class looks like as given below.
app.component.ts
import { DatePipe } from '@angular/common';
import { Component, OnInit} from '@angular/core';
import { FormControl, FormGroup} from '@angular/forms';
import { Member } from './member.model';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [DatePipe]
})
export class AppComponent implements OnInit {
membershiptypes = ['Silver', 'Gold', 'Platinum'];
currentDate = new Date();
member = new Member('', '', new Date(), '');
submitted = false;
membershipForm!: FormGroup;
constructor(private datePipe: DatePipe){ }
ngOnInit() {
this.membershipForm = new FormGroup({
memberName: new FormControl(null),
email: new FormControl(null),
mdate: new FormControl(this.datePipe.transform(this.currentDate, 'yyyy-MM-dd')),
membershipType: new FormControl('Silver')
});
}
onSubmit(){
this.submitted = true;
this.member.name = this.membershipForm.value.memberName;
this.member.mail = this.membershipForm.value.email;
this.member.membershipDate = this.membershipForm.value.mdate;
this.member.membershipType = this.membershipForm.value.membershipType;
}
}
If you see in the Component class we don’t have to do any thing special for Radio button, form control is added for Membership type like any other FormControl. A default value is also passed with it.
Template (app.component.html)
<div class="container">
<h1>Membership Form</h1>
<form [formGroup]="membershipForm" (ngSubmit)="onSubmit()">
<div class="row mb-3">
<div class="col-12">
<label class="form-label" for="name">Name</label>
<input type="text" class="form-control" id="name"
formControlName="memberName">
</div>
</div>
<div class="row mb-3">
<div class="col-12">
<label class="form-label" for="email">email</label>
<input type="email" class="form-control" id="email"
formControlName="email">
</div>
</div>
<div class="row mb-3">
<div class="col-12">
<label class="form-label" for="mdate">Membership Date</label>
<input type="date" class="form-control" id="mdate"
formControlName="mdate">
</div>
</div>
<div class="row mb-3">
<div class="col-12">
<label class="form-label">Membership Type</label>
<div class="radio" *ngFor="let mtype of membershiptypes">
<label class="form-label" for="type">
<input type="radio"
formControlName="membershipType" [value]="mtype">
{{mtype}}
</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
<hr>
<div *ngIf="submitted">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8">
<p>Name: {{member.name}}</p>
<p>email: {{member.mail}}</p>
<p>Membership Date: {{member.membershipDate | date:'dd/MM/yyyy'}}</p>
<p>Membership Type: {{member.membershipType}}</p>
</div>
</div>
</div>
</div>
- For Membership Type radio button, options are added using ngFor which iterates over membershiptyes array defined in the Component class.
- For syncing up the form controls you will have to bind each form field with the form control created in the component. That is done
by assigning formControlName to the name given in the component.
formControlName="membershipType"
That's all for this topic Radio Button in Angular Form Example. If you have any doubt or any suggestions to make please drop a comment. Thanks!
>>>Return to Angular Tutorial Page
Related Topics
You may also like-
No comments:
Post a Comment