@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

/@exmg/exm-form/

    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