Web Components Form Overview

    The Form Component in Web Components is used for setting up a contact form and/or a registration page that fit in any application's requirements. You can easily provide Web Components form validation, define form orientation, and configure or customize your desired layout as well. The Web Components form component also exposes events that give you the opportunity to respond to user actions.

    Web Components Form Example

    The following example represents IgcFormComponent that has some inputs, buttons and a checkbox inside.

    Usage

    First, you need to install the Ignite UI for Web Components by running the following command:

    npm install igniteui-webcomponents

    Before using the IgcFormComponent, you need to register it as follows:

    import {defineComponents, IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent);

    For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

    The simplest way to start using the IgcFormComponent is as follows:

    Form data is collected for the following components:

    When a form control is invalid, the form will not be submitted and an error message will be shown. If you want to specify that the form elements should not be validated when the form is submitted you can add the novalidate attribute to the IgcFormComponent element:

      <igc-form novalidate>
    <!-- Form content -->
  </igc-form>

    Events

    The Form component raises the following events:

    • Submit - Raised when the form is submitted
    • Reset - Raised when the form is reset

    Here is an example showing how to add an event listener for the Submit event:

    document.addEventListener('igcSubmit', function (event) {
  const customEvent = event as CustomEvent<FormData>;
  console.log(customEvent.detail);
});

    Methods

    The Form component exposes the following methods:

    Method Description
    Submit Submits the form data.
    Reset Resets the form data.
    GetFormData Collects the form data and returns a single FormData object.
    reportValidity Returns whether the element's child controls satisfy their validation constraints.

    API References

    Additional Resources