«number» Component Type

📖 Table of Contents

Introduction

The number component type extends the Input type. It sanitizes imported numbers and exports valid, non-empty values as JavaScript numbers.

  • Imports and Exports: Number or null
  • Singleton Pattern: Implements the Singleton Pattern
  • Data Conversion: Accepts numbers and numeric strings; invalid, empty, and null values become null.

Usage

Use an <input type="number">. If type is omitted, SmarkForm sets it to number; an explicit different native type or a non-<input> target raises a render error.

Example:

🔗
🗒️ HTML
🎨 CSS
⚙️ JS 👁️ Preview
❓ 
<div id="myForm">
  <input type="number" name="amount" data-smark>
</div>

const myForm = new SmarkForm(document.getElementById("myForm"), {
    "value": {
    "amount": 42
}
});

Requirements

The number component will throw an error if the target field is not an INPUT element or its type is explicitly defined and different to “number”.

Invalid values export as null rather than throwing. 0 is a valid number and is not considered empty. Empty strings, non-numeric strings, and null import as the empty state.

🔗
🗒️ HTML
🎨 CSS
⚙️ JS 👁️ Preview
❓ 
<div id="myForm">
  <p>
    <label>Correct:</label>
    <input type="number" name="amount1" data-smark='{"type":"number"}'>
  </p>
  <p>
    <label>Incorrect:</label>
    <input type="text" name="amount2" data-smark='{"type":"number"}'>
  </p>
</div>

const myForm = new SmarkForm(document.getElementById("myForm"));

When a component fails to render, SmarkForm replaces it with an error placeholder that shows the code and provides a button to replay the error in the console.

👉 Take a look to the Preview tab of the previous example to see it in action.

Notice that you’ll need to open your browser console if you want to see the error details when pressing the “Replay Error” button.

API Reference

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 number component type supports the following actions:

(Async) export (Action)

Exports the value of the number input field. If the value is not a valid number, it returns null.

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)

Imports a value into the number input field. If the value is not a valid number or string that can be converted to a number, it sets the field to null.

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: (number or string)
  • focus: (boolean, default true)

(Async) clear (Action)

Clears the value of the number input field (sets it to null).

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.

(Async) reset (Action)

Reverts the number field to its configured default value. If no default was configured, the field reverts to null (same as clear).

Options (reset)
  • action: (= “reset”)
  • 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.
Component Reference
«input» Component Type
Component Reference
«date» Component Type