Name and value in form submit in Angular Radio button component

27 Sep 20233 minutes to read

The name attribute of the RadioButton is used to group RadioButton. When the RadioButton are grouped in form, the checked item value attribute will be post to server on form submit
that can be retrieved through the name. The disabled and unchecked RadioButton value will not be sent to the server on form submit.

In the following code snippet, Credit and Debit card is in the checked state. Now, the value that is in checked state will be sent on form submit.

app.component.ts

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

@Component({
    selector: 'app-root',
    // Name and Value attribute in form submit.
    template: ` <div class="e-section-control">
                <form #form="ngForm" (ngSubmit)="submitForm(form)">
                <ul>
                    <li><ejs-radiobutton name="payment" [(ngModel)]="selectedOption" value="credit/debit" label="Credit / Debit card" checked="true"></ejs-radiobutton></li>

                    <li><ejs-radiobutton name="payment" [(ngModel)]="selectedOption" value="netbanking" label="Net Banking"></ejs-radiobutton></li>

                    <li><ejs-radiobutton name="payment" [(ngModel)]="selectedOption" value="cashondelivery" label="Cask On Delivery"></ejs-radiobutton></li>

                    <li><ejs-radiobutton name="payment" [(ngModel)]="selectedOption" value="others" label="Others"></ejs-radiobutton></li>

                    <li><button ejs-button [isPrimary]="true">Submit</button></li>
                </ul>
               </form>
               </div>`
})

export class AppComponent {
    public selectedOption: string = 'credit/debit';
    submitForm(form: NgForm): void  {
        console.log(form.value);
    }
 }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule, RadioButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
import { FormsModule } from '@angular/forms';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        RadioButtonModule,
        ButtonModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);