1.0.5 • Published 8 months ago

@exmg/exm-form v1.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

<exm-button> Published on npm

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

NameTypeDefaultDescription
submitBtnstringSaveSubmit button copy
cancelBtnstringCancelCancel button copy
submittingbooleanfalseIndicated form submit in progress and disables the button
hasAsideContentbooleanfalseIndicated if form has a side help section

For other options see the m3 docs:

Additional references

1.0.5

8 months ago

1.0.4

9 months ago

1.0.3

9 months ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago