«form» Component Type

📖 Table of Contents

Introduction
API Reference

Introduction

In SmarkForm the whole form is a field of the type form which imports and exports JSON data.

👉 The keys of that JSON data correspond to the names of the fields in the form.

👉 From fields can be created over any HTML tag except for actual HTML form elements (<input>, <textarea>, <select>, <button>…) and can contain any number of SmarkForm fields, including nested forms.

Example:

Following example shows a simple SmarkForm form with two nested forms:

🗒️ HTML

⚙️ JS

👁️ Preview

📝 Notes

<div id='myForm'>
<p>
    <label for='id'>Id:</label>
    <input data-smark type='text' name='id' />
</p>
<hr />
<p><b>Personal Data:</b></p>
<div data-smark='{"type":"form","name":"personalData"}'>
    <p>
        <label for='name'>Name:</label>
        <input data-smark type='text' name='name' placheolder='Family name'/>
    </p>
    <p>
        <label for='surname'>Surname:</label>
        <input data-smark type='text' name='surname' />
    </p>
    <p>
        <label for='address'>Address:</label>
        <input data-smark type='text' name='address' />
    </p>
</div>
<hr />
<p><b>Business Data:</b></p>
<div data-smark='{"type":"form","name":"businessData"}'>
    <p>
        <label for='name'>Company Name:</label>
        <input data-smark type='text' name='name' placheolder='Company Name'/>
    </p>
    <p>
        <label for='address'>Address:</label>
        <input data-smark type='text' name='address' />
    </p>
</div>
<hr />
<button data-smark='{"action": "import"}'>Edit JSON</button>
<button data-smark='{"action": "clear"}'>Clear Data</button>
<button data-smark='{"action": "export"}'>Show JSON</button>
</div>

const myForm = new SmarkForm(document.getElementById("myForm"));
/* Export action: */
myForm.on("AfterAction_export", function ({data}) {
    window.alert (JSON.stringify(data, null, 4));
});
/*Import action: */ 
myForm.on("BeforeAction_import", async function (ev) {
    const prevData = JSON.stringify(await myForm.export());
    const newData = window.prompt("Data to import", prevData);
    try {
        ev.data = JSON.parse(newData);
    } catch (err) {
        ev.preventDefault();
        window.alert("Invalid data!");
    };
});

Id:

Personal Data:

Name:

Surname:

Address:

Business Data:

Company Name:

Address:

👉 Play* with Edit JSON, Clear Data and Show JSON butons.

👉 Check JS tab to see how easy is capturing or injecting data from/to the form (or any inner form field).

👉 The outer form doesn’t need the “data-smark” attribute having it is the the one we passed to the SmarkForm constructor.

👉 Notice that the clear action just works out of the box.

ℹ️ In text fields the “name” attribute is naturally taken as field name.

ℹ️ In the case of nested form, having <div> tags cannot have a “name” attribute, it is provided as a data-smark object property (which is always valid).

🚀 This is a simple showcase form. You can extend it with any valid SmarkForm field.

API Reference

Options

Actions

Actions are special component methods that can be triggered both programmatically (by directly calling the function) or by user interaction with a trigger component. Each action is associated with a specific behavior that can be performed on the component.

👉 Actions receive an options object as an argument, which contains the necessary information to perform the action.

👉 When called from triggers, the properties defined in their data-smark object, are passed as options to the action. Those expecting a path(★ ) to other components are resolved to the actual component.

The form component type supports the following actions:

(Async) export (Action)

Options (export)

action: (= “export”)
origin: Origin is automatically set to the trigger component that called the action (and cannot be overridden). In case of a manual call, it is set to Null.
context: Path★ (absolute or relative to its natural context) to the component that is the context of the action. If not provided, the context is set to its natural context.
target: Path★ (absolute or relative to its context). Pipes the exported data to the import action of the target component.
data:

(Async) import (Action)

Options (import)

action: (= “import”)
origin: Origin is automatically set to the trigger component that called the action (and cannot be overridden). In case of a manual call, it is set to Null.
context: Path★ (absolute or relative to its natural context) to the component that is the context of the action. If not provided, the context is set to its natural context.
target: Path★ (absolute or relative to its context). Pipes the imported data from the export action of the target component, overridding the “data” option if specified.
data: (JSON)
focus: (boolean, default true)

(Async) clear (Action)

(Shorhand for import({data: {}}))

Options (clear)

action: (= “clear”)
origin: Origin is automatically set to the trigger component that called the action (and cannot be overridden). In case of a manual call, it is set to Null.
context: Path★ (absolute or relative to its natural context) to the component that is the context of the action. If not provided, the context is set to its natural context.
target:

Events

«list» Component Type

⏩