<exm-button>

exm-form

The Exmg Form enhances form design by offering a more intuitive layout visualization, streamlining the user experience with several key features. These include:

• Automated form validity checks, ensuring data integrity.
• Dynamic submit button control, which enables or disables the button based on form completeness.
• JSON output capability, allowing for easy data serialization and integration.
• A loading spinner, providing a visual indicator for asynchronous form submissions.

Installation

npm install @exmg/exm-form

Example Usage

Text

<exm-form class="has-aside" @dialog-submit="${doFormAction}">
  <div slot="toolbar" class="toolbar"><div class="title">Create contact</div></div>
  <form>
    <div class="row">
      <md-filled-text-field name="firstname" dialogFocus label="First Name" required></md-filled-text-field>
      <md-filled-text-field name="lastname" label="Last Name" required></md-filled-text-field>
    </div>
    <div class="row">
      <md-filled-text-field name="company" label="Company"></md-filled-text-field>
      <md-filled-text-field name="amount" label="Amount" type="number" min="0" max="10"></md-filled-text-field>
    </div>
    <md-filled-text-field
      name="email"
      label="Email"
      pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$"
      required
    ></md-filled-text-field>
    <md-filled-text-field name="phone" label="Phone" required></md-filled-text-field>
  </form>
  <div slot="aside">
    Ex Machina will send notices about the Data <a href="#">Processing Terms</a> and EU General Data Protection
    Regulation to your primary contact. If your organization has a data protection officer or an EU representative, add
    their contact information.
  </div>
</exm-form>

   async function doFormAction(e: CustomEvent<unknown>) {
    const formDialog = e.target as ExmForm;
    try {
      formDialog.submitting = true;
      // Do server call
      // Show success message
    } catch (error) {
      console.error(error instanceof Error ? error.message : 'Unknown error');
    } finally {
      formDialog.submitting = false;
    }
  }

API

Properties/Attributes

| Name | Type | Default | Description | | ----------------- | --------- | -------- | --------------------------------------------------------- | | submitBtn | string | Save | Submit button copy | | cancelBtn | string | Cancel | Cancel button copy | | submitting | boolean | false | Indicated form submit in progress and disables the button | | hasAsideContent | boolean | false | Indicated if form has a side help section |

For other options see the m3 docs:

• Material 3 Button Docs

Additional references

• Demo / Docs