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.
npm install @exmg/exm-form
<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;
}
}
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: