Search results

Form submit in Angular ButtonGroup component

22 Oct 2021 / 1 minute to read

The name attribute of the input element is used to group radio/checkbox type ButtonGroup. When the radio/checkbox type are grouped in form, the checked items value attribute will be posted to server on form submit that can be retrieved through the name. The disabled radio/checkbox type value will not be sent to the server on form submit.

In the following code snippet, the radio type ButtonGroup is explained with male value as checked. Now, the value that is in checked state will be sent on form submit.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<!-- To render ButtonGroup. -->
              <form>
                <div class='e-btn-group'>
                    <input type="radio" id="male" name="gender" value="male" checked/>
                    <label class="e-btn" for="male">Male</label>
                    <input type="radio" id="female" name="gender" value="female"/>
                    <label class="e-btn" for="female">Female</label>
                    <input type="radio" id="transgender" name="gender" value="transgender"/>
                    <label class="e-btn" for="transgender">Transgender</label>
                </div>
                <button class='e-btn e-primary'>Submit</button>
            </form>`
})

export class AppComponent {
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);