Name and value in form submit in Angular Check box component

27 Sep 20233 minutes to read

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

In the following code snippet, Cricket and Hockey are in the checked state, Tennis is in disabled state and Basketball is in unchecked state. Now, the value that is in checked state only be sent on form submit.

app.component.ts

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

@Component({
    selector: 'app-root',
    //Name and Value attribute in form submit.
    template: `<div class="e-section-control">
                <form>
                <ul>
                    <li><ejs-checkbox name="Sport" value="Cricket" label="Cricket" [checked]="true"></ejs-checkbox></li>

                    <li><ejs-checkbox name="Sport" value="Hockey" label="Hockey" [checked]="true"></ejs-checkbox></li>

                    <li><ejs-checkbox name="Sport" value="Tennis" label="Tennis" [disabled]="true"></ejs-checkbox></li>

                    <li><ejs-checkbox name="Sport" value="Basketball" label="Basketball"></ejs-checkbox></li>

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

export class AppComponent { }

app.module.ts

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

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CheckBoxModule,
        ButtonModule
    ],
    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);