@exmg/exm-form
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

<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

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:

Additional references

Readme

Keywords

Package Sidebar

Install

npm i @exmg/exm-form

Weekly Downloads

40

Version

1.0.5

License

MIT

Unpacked Size

24.3 kB

Total Files

14

Last publish

Collaborators

  • licenses
  • livery-ci
  • exm_erwingoossen
  • martinkolkman
  • em-jeroenv
  • nicholas-exmachina
  • marksmits
  • difosfor
  • tylerexmg
  • padamieo_exmachina
  • albert_exm
  • rdrgcnn
  • sander_exmachina
  • joepadmiraal
  • exmachina-ci
  • remonvv
  • kjelles