«number» Component Type

📖 Table of Contents

Introduction

The number component type extends the Input component type, providing additional sanitation (when importing) and formatting (when exporting).

  • Imports and Exports: Number
  • Singleton Pattern: Implements the Singleton Pattern
  • Data Conversion: Converts inappropriate types (like String) to Number on the fly.

Usage

To use the number component type, ensure that the target field is an INPUT element of type number. If the type attribute is not specified, it will be set to number automatically.

Example:

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

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

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”.

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 numbers will result in a null value rather than throwing an error.

🔗
🗒️ HTML
⚙️ JS
👁️ Preview
<div id="myForm">
<input type="text" name="amount" data-smark='{"type":"number"}'>
</div>

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

When a SmarkForm component fails to render due to a RenderError, it is replaced by a flamboyant placeholder that shows the error code and provides a handy button to “replay” it to the console making it easier to debug the issue.

👉 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.
Component Types
«input» Component Type
Component Types
«color» Component Type

Hello footer