smart-html-elements

Form — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Form - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-form id="demo-form"></smart-form>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.form.js';

    const el = document.getElementById('demo-form');
    if (el) {

      el.columns = 2;
      el.controls = [
        { dataField: 'firstName', controlType: 'input', label: 'First Name', required: true },
        { dataField: 'lastName', controlType: 'input', label: 'Last Name', required: true },
        { dataField: 'email', controlType: 'input', label: 'Email', required: true },
        { dataField: 'subscribe', controlType: 'boolean', label: 'Subscribe' },
        { dataField: 'submit', controlType: 'button', label: 'Submit', action: 'submit' }
      ];
      el.value = { firstName: 'Nancy', lastName: 'Davolio', email: 'nancy@northwind.test', subscribe: true };
      el.showSummary = true;

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>

For AI tooling

Developer Quick Reference

Component: Form Framework: JavaScript Selector: smart-form

API counts: 11 properties, 7 methods, 0 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: addControl(), getControl(), insertControl(), removeControl(), submit(), reset()

Common events: n/a

Module hint: smart-webcomponents/source/modules/smart.form.js

Reactive Form Component with Advanced Validation

Class

Form

Reactive Form Component with Advanced Validation

Properties

columnsDefines or retrieves the number of columns used to arrange form fields, determining how fields are organized and displayed within the form layout.number

Defines or retrieves the number of columns used to arrange form fields, determining how fields are organized and displayed within the form layout.

Default value

Try a demo showcasing the columns property.

controlsGets or sets the collection of form controls associated with the form. This allows you to retrieve the current controls or update them with a new set of controls. Click for more details. Property object's options:
controls:[]
[]

Gets or sets the collection of form controls associated with the form. This allows you to retrieve the current controls or update them with a new set of controls.

Properties

Try a demo showcasing the controls property.

Examples

Markup and runtime examples for controls:

HTML:

<smart-form controls=""></smart-form>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-form');
el.controls = "";

Read the current value:

const el = document.querySelector('smart-form');
const controls = el.controls;

appendHTML Content displayed after the Form Controlstring

HTML Content displayed after the Form Control

Default value

Back to root property: controls

Try a demo showcasing the append property.

Read the nested value:

const el = document.querySelector('smart-form');
const append = el.controls["firstName"].append;

backButtonLabelFormGroup only(when controlType is set to 'group'). Gets or Sets the back button label.string

FormGroup only(when controlType is set to 'group'). Gets or Sets the back button label.

Default value

"Back"

Back to root property: controls

Read the nested value:

const el = document.querySelector('smart-form');
const backButtonLabel = el.controls["firstName"].backButtonLabel;

columnsSets the Form Group columns.number

Sets the Form Group columns.

Default value

Back to root property: controls

Try a demo showcasing the columns property.

Read the nested value:

const el = document.querySelector('smart-form');
const columns = el.controls["firstName"].columns;

columnSpanSets the Form control column span.number

Sets the Form control column span.

Default value

Back to root property: controls

Try a demo showcasing the columnSpan property.

Read the nested value:

const el = document.querySelector('smart-form');
const columnSpan = el.controls["firstName"].columnSpan;

controlOptionsJSON object with initialization properties of the UI component. Example: { dataSource: ['item 1', 'item 2', 'item 3'] } will set the dataSource property of the Form control.any

JSON object with initialization properties of the UI component. Example: { dataSource: ['item 1', 'item 2', 'item 3'] } will set the dataSource property of the Form control.

Back to root property: controls

Try a demo showcasing the controlOptions property.

Read the nested value:

const el = document.querySelector('smart-form');
const controlOptions = el.controls["firstName"].controlOptions;

controls Click for more details. Property object's options:
[]

Properties

Back to root property: controls

Try a demo showcasing the controls property.

Read the nested value:

const el = document.querySelector('smart-form');
const controls = el.controls["firstName"].controls;

appendHTML Content displayed after the Form Controlstring

HTML Content displayed after the Form Control

Default value

Back to root property: controls

Try a demo showcasing the append property.

Read the nested value:

const el = document.querySelector('smart-form');
const append = el.controls["firstName"].controls["firstName"].append;

backButtonLabelFormGroup only(when controlType is set to 'group'). Gets or Sets the back button label.string

FormGroup only(when controlType is set to 'group'). Gets or Sets the back button label.

Default value

"Back"

Back to root property: controls

Read the nested value:

const el = document.querySelector('smart-form');
const backButtonLabel = el.controls["firstName"].controls["firstName"].backButtonLabel;

columnsSets the Form Group columns.number

Sets the Form Group columns.

Default value

Back to root property: controls

Try a demo showcasing the columns property.

Read the nested value:

const el = document.querySelector('smart-form');
const columns = el.controls["firstName"].controls["firstName"].columns;

columnSpanSets the Form control column span.number

Sets the Form control column span.

Default value

Back to root property: controls

Try a demo showcasing the columnSpan property.

Read the nested value:

const el = document.querySelector('smart-form');
const columnSpan = el.controls["firstName"].controls["firstName"].columnSpan;

controlOptionsJSON object with initialization properties of the UI component. Example: { dataSource: ['item 1', 'item 2', 'item 3'] } will set the dataSource property of the Form control.any

JSON object with initialization properties of the UI component. Example: { dataSource: ['item 1', 'item 2', 'item 3'] } will set the dataSource property of the Form control.

Back to root property: controls

Try a demo showcasing the controlOptions property.

Read the nested value:

const el = document.querySelector('smart-form');
const controlOptions = el.controls["firstName"].controls["firstName"].controlOptions;

controlTypeThe type of the control."button" | "boolean" | "comboBox" | "checkInput" | "datetime" | "dropDownList" | "group" | "input" | "label" | "multiInput" | "multiComboInput" | "mask" | "number" | "password" | "radioButton" | "submit" | "textarea" | "template"

The type of the control.

Allowed Values

"button" - Button control
"boolean" - Checkbox control.
"comboBox" - ComboBox control.
"checkInput" - Check input control.
"datetime" - Date/Time input control.
"dropDownList" - dropDownList control.
"group" - Sets the control type to FormGroup.
"input" - Text input control.
"label" - Label control.
"multiInput" - Multi input control.
"multiComboInput" - Multi combo input control.
"mask" - Masked text input. The mask property is expected to be set to a string.
"number" - Numeric text input control.
"password" - Password text input contorl.
"radioButton" - Radio Button control. When setting this option, the options property defines the Array of radio buttons. The optionsLayout property which accepts 'horizontal' and 'vertical' values defines the layout of the radio buttons.
"submit" - Submit button, which submits the Form.
"textarea" - Text area control.
"template" - Template control. The template property should be set to any HTML string.

Default value

"input"

Back to root property: controls

Try a demo showcasing the controlType property.

Read the nested value:

const el = document.querySelector('smart-form');
const controlType = el.controls["firstName"].controls["firstName"].controlType;

dataFieldSets the Form control data field. The control's inner input's name is set to the dataField value and in the FormGroup it is accessible through the dataField value.string

Sets the Form control data field. The control's inner input's name is set to the dataField value and in the FormGroup it is accessible through the dataField value.

Default value

Back to root property: controls

Try a demo showcasing the dataField property.

Read the nested value:

const el = document.querySelector('smart-form');
const dataField = el.controls["firstName"].controls["firstName"].dataField;

dirtyGets whether the Form control is 'dirty' i.e its value is changed by the user.boolean

Gets whether the Form control is 'dirty' i.e its value is changed by the user.

Default value

false

Back to root property: controls

Read the nested value:

const el = document.querySelector('smart-form');
const dirty = el.controls["firstName"].controls["firstName"].dirty;

disabledSets the Form control disabled mode.boolean

Sets the Form control disabled mode.

Default value

false

Back to root property: controls

Try a demo showcasing the disabled property.

Read the nested value:

const el = document.querySelector('smart-form');
const disabled = el.controls["firstName"].controls["firstName"].disabled;

infoGets or Sets the Form control's info icon's tooltip.string

Gets or Sets the Form control's info icon's tooltip.

Default value

Back to root property: controls

Try a demo showcasing the info property.

Read the nested value:

const el = document.querySelector('smart-form');
const info = el.controls["firstName"].controls["firstName"].info;

invalidGets whether the Form control is invalid.boolean

Gets whether the Form control is invalid.

Default value

false

Back to root property: controls

Read the nested value:

const el = document.querySelector('smart-form');
const invalid = el.controls["firstName"].controls["firstName"].invalid;

labelGets or Sets the Form control's label.string

Gets or Sets the Form control's label.

Default value

Back to root property: controls

Try a demo showcasing the label property.

Read the nested value:

const el = document.querySelector('smart-form');
const label = el.controls["firstName"].controls["firstName"].label;

labelAlignFormGroup only(when controlType is set to 'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when the viewMode property is set.string

FormGroup only(when controlType is set to 'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when the viewMode property is set.

Default value

"left"

Back to root property: controls

Try a demo showcasing the labelAlign property.

Read the nested value:

const el = document.querySelector('smart-form');
const labelAlign = el.controls["firstName"].controls["firstName"].labelAlign;

labelOffsetGets or Sets the offset between the label and the control.number

Gets or Sets the offset between the label and the control.

Default value

Back to root property: controls

Read the nested value:

const el = document.querySelector('smart-form');
const labelOffset = el.controls["firstName"].controls["firstName"].labelOffset;

labelPositionGets or Sets the Form control's label position."left" | "top"

Gets or Sets the Form control's label position.

Default value

"left"

Back to root property: controls

Try a demo showcasing the labelPosition property.

Read the nested value:

const el = document.querySelector('smart-form');
const labelPosition = el.controls["firstName"].controls["firstName"].labelPosition;

nextButtonLabelFormGroup only(when controlType is set to 'group'). Gets or Sets the next button label.string

FormGroup only(when controlType is set to 'group'). Gets or Sets the next button label.

Default value

"Next"

Back to root property: controls

Read the nested value:

const el = document.querySelector('smart-form');
const nextButtonLabel = el.controls["firstName"].controls["firstName"].nextButtonLabel;

placeholderGets or Sets the placeholder.string

Gets or Sets the placeholder.

Default value

Back to root property: controls

Try a demo showcasing the placeholder property.

Read the nested value:

const el = document.querySelector('smart-form');
const placeholder = el.controls["firstName"].controls["firstName"].placeholder;

prependHTML Content displayed before the Form Controlstring

HTML Content displayed before the Form Control

Default value

Back to root property: controls

Try a demo showcasing the prepend property.

Read the nested value:

const el = document.querySelector('smart-form');
const prepend = el.controls["firstName"].controls["firstName"].prepend;

readonlyGets or Sets the Form control readonly mode.boolean

Gets or Sets the Form control readonly mode.

Default value

false

Back to root property: controls

Read the nested value:

const el = document.querySelector('smart-form');
const readonly = el.controls["firstName"].controls["firstName"].readonly;

showButtonsFormGroup only(when controlType is set to 'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when the viewMode property is set.boolean

FormGroup only(when controlType is set to 'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when the viewMode property is set.

Default value

false

Back to root property: controls

Try a demo showcasing the showButtons property.

Read the nested value:

const el = document.querySelector('smart-form');
const showButtons = el.controls["firstName"].controls["firstName"].showButtons;

untouchedGets whether the Form control is not touched by the user. This flag is changed usually on blur, after the user interacted with the Form controlboolean

Gets whether the Form control is not touched by the user. This flag is changed usually on blur, after the user interacted with the Form control

Default value

false

Back to root property: controls

Read the nested value:

const el = document.querySelector('smart-form');
const untouched = el.controls["firstName"].controls["firstName"].untouched;

validGets whether the Form control is valid.boolean

Gets whether the Form control is valid.

Default value

false

Back to root property: controls

Read the nested value:

const el = document.querySelector('smart-form');
const valid = el.controls["firstName"].controls["firstName"].valid;

validationRulesSets or gets the column's validation rules. The expected value is an Array of Objects. Each object should have a 'type' property that can be set to 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The 'value' property should be set, too. For validation rule types 'required', 'requiredTrue' and 'null' you can skip the 'value' property. Optional property is 'message', which determines the error message. Click for more details. Property object's options:
[] | null

Sets or gets the column's validation rules. The expected value is an Array of Objects. Each object should have a 'type' property that can be set to 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The 'value' property should be set, too. For validation rule types 'required', 'requiredTrue' and 'null' you can skip the 'value' property. Optional property is 'message', which determines the error message.

Back to root property: controls

Try a demo showcasing the validationRules property.

Examples

Set a nested field on the element:

const el = document.querySelector('smart-form');
el.controls["firstName"].controls["firstName"].validationRules = {type: 'email'};

Read the nested value:

const el = document.querySelector('smart-form');
const validationRules = el.controls["firstName"].controls["firstName"].validationRules;

valueSets or Gets the Form control or Form group value.any

Sets or Gets the Form control or Form group value.

Back to root property: controls

Try a demo showcasing the value property.

Read the nested value:

const el = document.querySelector('smart-form');
const value = el.controls["firstName"].controls["firstName"].value;

viewModeFormGroup only(when controlType is set to 'group'). Gets or Sets the form'group view mode."" | "accordion" | "tabs" | "breadcrumb"

FormGroup only(when controlType is set to 'group'). Gets or Sets the form'group view mode.

Default value

Back to root property: controls

Try a demo showcasing the viewMode property.

Read the nested value:

const el = document.querySelector('smart-form');
const viewMode = el.controls["firstName"].controls["firstName"].viewMode;

controlTypeThe type of the control."button" | "boolean" | "comboBox" | "checkInput" | "datetime" | "dropDownList" | "group" | "input" | "label" | "multiInput" | "multiComboInput" | "mask" | "number" | "password" | "radioButton" | "submit" | "textarea" | "template"

The type of the control.

Allowed Values

"button" - Button control
"boolean" - Checkbox control.
"comboBox" - ComboBox control.
"checkInput" - Check input control.
"datetime" - Date/Time input control.
"dropDownList" - dropDownList control.
"group" - Sets the control type to FormGroup.
"input" - Text input control.
"label" - Label control.
"multiInput" - Multi input control.
"multiComboInput" - Multi combo input control.
"mask" - Masked text input. The mask property is expected to be set to a string.
"number" - Numeric text input control.
"password" - Password text input contorl.
"radioButton" - Radio Button control. When setting this option, the options property defines the Array of radio buttons. The optionsLayout property which accepts 'horizontal' and 'vertical' values defines the layout of the radio buttons.
"submit" - Submit button, which submits the Form.
"textarea" - Text area control.
"template" - Template control. The template property should be set to any HTML string.

Default value

"input"

Back to root property: controls

Try a demo showcasing the controlType property.

Read the nested value:

const el = document.querySelector('smart-form');
const controlType = el.controls["firstName"].controlType;

dataFieldSets the Form control data field. The control's inner input's name is set to the dataField value and in the FormGroup it is accessible through the dataField value.string

Sets the Form control data field. The control's inner input's name is set to the dataField value and in the FormGroup it is accessible through the dataField value.

Default value

Back to root property: controls

Try a demo showcasing the dataField property.

Read the nested value:

const el = document.querySelector('smart-form');
const dataField = el.controls["firstName"].dataField;

dirtyGets whether the Form control is 'dirty' i.e its value is changed by the user.boolean

Gets whether the Form control is 'dirty' i.e its value is changed by the user.

Default value

false

Back to root property: controls

Read the nested value:

const el = document.querySelector('smart-form');
const dirty = el.controls["firstName"].dirty;

disabledSets the Form control disabled mode.boolean

Sets the Form control disabled mode.

Default value

false

Back to root property: controls

Try a demo showcasing the disabled property.

Read the nested value:

const el = document.querySelector('smart-form');
const disabled = el.controls["firstName"].disabled;

infoGets or Sets the Form control's info icon's tooltip.string

Gets or Sets the Form control's info icon's tooltip.

Default value

Back to root property: controls

Try a demo showcasing the info property.

Read the nested value:

const el = document.querySelector('smart-form');
const info = el.controls["firstName"].info;

invalidGets whether the Form control is invalid.boolean

Gets whether the Form control is invalid.

Default value

false

Back to root property: controls

Read the nested value:

const el = document.querySelector('smart-form');
const invalid = el.controls["firstName"].invalid;

labelGets or Sets the Form control's label.string

Gets or Sets the Form control's label.

Default value

Back to root property: controls

Try a demo showcasing the label property.

Read the nested value:

const el = document.querySelector('smart-form');
const label = el.controls["firstName"].label;

labelAlignFormGroup only(when controlType is set to 'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when the viewMode property is set.string

FormGroup only(when controlType is set to 'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when the viewMode property is set.

Default value

"left"

Back to root property: controls

Try a demo showcasing the labelAlign property.

Read the nested value:

const el = document.querySelector('smart-form');
const labelAlign = el.controls["firstName"].labelAlign;

labelOffsetGets or Sets the offset between the label and the control.number

Gets or Sets the offset between the label and the control.

Default value

Back to root property: controls

Read the nested value:

const el = document.querySelector('smart-form');
const labelOffset = el.controls["firstName"].labelOffset;

labelPositionGets or Sets the Form control's label position."left" | "top"

Gets or Sets the Form control's label position.

Default value

"left"

Back to root property: controls

Try a demo showcasing the labelPosition property.

Read the nested value:

const el = document.querySelector('smart-form');
const labelPosition = el.controls["firstName"].labelPosition;

nextButtonLabelFormGroup only(when controlType is set to 'group'). Gets or Sets the next button label.string

FormGroup only(when controlType is set to 'group'). Gets or Sets the next button label.

Default value

"Next"

Back to root property: controls

Read the nested value:

const el = document.querySelector('smart-form');
const nextButtonLabel = el.controls["firstName"].nextButtonLabel;

placeholderGets or Sets the placeholder.string

Gets or Sets the placeholder.

Default value

Back to root property: controls

Try a demo showcasing the placeholder property.

Read the nested value:

const el = document.querySelector('smart-form');
const placeholder = el.controls["firstName"].placeholder;

prependHTML Content displayed before the Form Controlstring

HTML Content displayed before the Form Control

Default value

Back to root property: controls

Try a demo showcasing the prepend property.

Read the nested value:

const el = document.querySelector('smart-form');
const prepend = el.controls["firstName"].prepend;

readonlyGets or Sets the Form control readonly mode.boolean

Gets or Sets the Form control readonly mode.

Default value

false

Back to root property: controls

Read the nested value:

const el = document.querySelector('smart-form');
const readonly = el.controls["firstName"].readonly;

showButtonsFormGroup only(when controlType is set to 'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when the viewMode property is set.boolean

FormGroup only(when controlType is set to 'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when the viewMode property is set.

Default value

false

Back to root property: controls

Try a demo showcasing the showButtons property.

Read the nested value:

const el = document.querySelector('smart-form');
const showButtons = el.controls["firstName"].showButtons;

untouchedGets whether the Form control is not touched by the user. This flag is changed usually on blur, after the user interacted with the Form controlboolean

Gets whether the Form control is not touched by the user. This flag is changed usually on blur, after the user interacted with the Form control

Default value

false

Back to root property: controls

Read the nested value:

const el = document.querySelector('smart-form');
const untouched = el.controls["firstName"].untouched;

validGets whether the Form control is valid.boolean

Gets whether the Form control is valid.

Default value

false

Back to root property: controls

Read the nested value:

const el = document.querySelector('smart-form');
const valid = el.controls["firstName"].valid;

validationRulesSets or gets the column's validation rules. The expected value is an Array of Objects. Each object should have a 'type' property that can be set to 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The 'value' property should be set, too. For validation rule types 'required', 'requiredTrue' and 'null' you can skip the 'value' property. Optional property is 'message', which determines the error message. Click for more details. Property object's options:
[] | null

Back to root property: controls

Try a demo showcasing the validationRules property.

Examples

Set a nested field on the element:

const el = document.querySelector('smart-form');
el.controls["firstName"].validationRules = {type: 'email'};

Read the nested value:

const el = document.querySelector('smart-form');
const validationRules = el.controls["firstName"].validationRules;

valueSets or Gets the Form control or Form group value.any

Sets or Gets the Form control or Form group value.

Back to root property: controls

Try a demo showcasing the value property.

Read the nested value:

const el = document.querySelector('smart-form');
const value = el.controls["firstName"].value;

viewModeFormGroup only(when controlType is set to 'group'). Gets or Sets the form'group view mode."" | "accordion" | "tabs" | "breadcrumb"

FormGroup only(when controlType is set to 'group'). Gets or Sets the form'group view mode.

Default value

Back to root property: controls

Try a demo showcasing the viewMode property.

Read the nested value:

const el = document.querySelector('smart-form');
const viewMode = el.controls["firstName"].viewMode;

labelPositionDefines or retrieves the position of the labels relative to their associated elements. Specify this property to control where labels are displayed (e.g., above, below, left, or right of the element)."left" | "top"

Defines or retrieves the position of the labels relative to their associated elements. Specify this property to control where labels are displayed (e.g., above, below, left, or right of the element).

Default value

"left"

Try a demo showcasing the labelPosition property.

onStatusChangesCallback function invoked when the status changes. The status parameter passed to the function reflects the new state of the process, and can be one of the following string values: 'disabled', 'invalid', 'pending', or 'valid'. Use this callback to handle logic based on each specific status transition.{(value: string): void}

Callback function invoked when the status changes. The status parameter passed to the function reflects the new state of the process, and can be one of the following string values: 'disabled', 'invalid', 'pending', or 'valid'. Use this callback to handle logic based on each specific status transition.

onValueChangesCallback function invoked when the form's value changes. Receives the updated form data as a JSON object argument, allowing you to handle or process the new values within your application.{(value: any): void}

Callback function invoked when the form's value changes. Receives the updated form data as a JSON object argument, allowing you to handle or process the new values within your application.

Try a demo showcasing the onValueChanges property.

readonlySets all form fields to read-only mode, preventing users from modifying their input while still allowing them to view the existing data.boolean

Sets all form fields to read-only mode, preventing users from modifying their input while still allowing them to view the existing data.

Default value

false

HTML attribute:

<smart-form readonly></smart-form>

showColonAfterLabelControls the visibility of the colon character that appears after label text. When enabled, a colon is displayed after each label; when disabled, the colon is omitted.boolean

Controls the visibility of the colon character that appears after label text. When enabled, a colon is displayed after each label; when disabled, the colon is omitted.

Default value

false

Try a demo showcasing the showColonAfterLabel property.

HTML attribute:

<smart-form show-colon-after-label></smart-form>

showSummaryToggles the visibility of the validation summary, allowing users to display or hide a list of validation errors based on form input.boolean

Toggles the visibility of the validation summary, allowing users to display or hide a list of validation errors based on form input.

Default value

true

Try a demo showcasing the showSummary property.

HTML attribute:

<smart-form show-summary></smart-form>

statusRetrieves the current status of the Form. Each entry within the `status` object contains the following boolean properties: `dirty` (indicates if the form field has been modified), `untouched` (indicates if the field has not been focused by the user), and `disabled` (indicates if the field is currently disabled).any

Retrieves the current status of the Form. Each entry within the status object contains the following boolean properties: dirty (indicates if the form field has been modified), untouched (indicates if the field has not been focused by the user), and disabled (indicates if the field is currently disabled).

validateOnLoadAutomatically triggers form validation immediately upon form initialization, ensuring that all form fields are checked for correctness as soon as the form is rendered or instantiated.boolean

Automatically triggers form validation immediately upon form initialization, ensuring that all form fields are checked for correctness as soon as the form is rendered or instantiated.

Default value

false

HTML attribute:

<smart-form validate-on-load></smart-form>

valueRetrieves or assigns the current value of the form. Use this property to access the form's data for processing or to update the form with new values programmatically.any

Retrieves or assigns the current value of the form. Use this property to access the form's data for processing or to update the form with new values programmatically.

Try a demo showcasing the value property.

Methods

addControl( controlOptions: any): voidInserts a new control element, such as an input field, button, or checkbox, into the Form, allowing users to interact with and submit data.

Inserts a new control element, such as an input field, button, or checkbox, into the Form, allowing users to interact with and submit data.

Arguments

controlOptionsany

Control options. The control options description is available in the controls property.

On the custom element in the DOM (narrow the selector, e.g. to #my-form, if you host multiple widgets):

document.querySelector('smart-form')?.addControl({"dataField":"firstName","controlType":"input"});

Try a demo showcasing the addControl method.

getControl( dataField: string): ControlRetrieves a specific control element from the form using its name attribute, as defined by the dataField parameter. This method enables direct access to the control's properties and methods for further manipulation or data retrieval.

Retrieves a specific control element from the form using its name attribute, as defined by the dataField parameter. This method enables direct access to the control's properties and methods for further manipulation or data retrieval.

Arguments

dataFieldstring

dataField of a FormControl or FormGroup

ReturnsControl

On the custom element in the DOM (narrow the selector, e.g. to #my-form, if you host multiple widgets):

const result = document.querySelector('smart-form')?.getControl("firstName");

insertControl( index: number, controlOptions: any): voidAdds a new control element to the Form, allowing users to dynamically extend the form’s functionality. This method enables the inclusion of input fields, buttons, dropdowns, or other interactive components within the Form, ensuring seamless integration and consistent behavior with existing controls.

Adds a new control element to the Form, allowing users to dynamically extend the form’s functionality. This method enables the inclusion of input fields, buttons, dropdowns, or other interactive components within the Form, ensuring seamless integration and consistent behavior with existing controls.

Arguments

indexnumber

Control insert index

controlOptionsany

Control options. The control options description is available in the controls property.

On the custom element in the DOM (narrow the selector, e.g. to #my-form, if you host multiple widgets):

document.querySelector('smart-form')?.insertControl(1,{"dataField":"firstName","controlType":"input"});

Try a demo showcasing the insertControl method.

removeControl( controlOptions: any): voidRemoves a specified control element from the Form, ensuring it is no longer rendered or managed as part of the Form's structure and behavior.

Removes a specified control element from the Form, ensuring it is no longer rendered or managed as part of the Form's structure and behavior.

Arguments

controlOptionsany

Control options. The control options description is available in the controls property.

On the custom element in the DOM (narrow the selector, e.g. to #my-form, if you host multiple widgets):

document.querySelector('smart-form')?.removeControl("firstName");

Try a demo showcasing the removeControl method.

reset(): voidResets all fields in the form to their initial, default values, effectively clearing any user input or changes made.

Resets all fields in the form to their initial, default values, effectively clearing any user input or changes made.

On the custom element in the DOM (narrow the selector, e.g. to #my-form, if you host multiple widgets):

document.querySelector('smart-form')?.reset();

submit( submitOptions?: any): voidTriggers the submission of the form, sending the user-entered data to the specified server endpoint for processing. This action may also initiate form validation and execute any associated event handlers before transmitting the data.

Triggers the submission of the form, sending the user-entered data to the specified server endpoint for processing. This action may also initiate form validation and execute any associated event handlers before transmitting the data.

Arguments

submitOptions?any

Sets the submit options object. The object may have the following properties: async, action, target, method. async determines whether the form will be submitted asynchronously. action determines the submit url, method sets whether the submit is through 'GET' or 'POST'. target determines the submit target.

On the custom element in the DOM (narrow the selector, e.g. to #my-form, if you host multiple widgets):

document.querySelector('smart-form')?.submit();

Try a demo showcasing the submit method.

validate(): voidPerforms comprehensive validation of the form fields, ensuring that all required inputs are provided, data types and formats are correct, and any specified constraints or validation rules are met before allowing form submission.

Performs comprehensive validation of the form fields, ensuring that all required inputs are provided, data types and formats are correct, and any specified constraints or validation rules are met before allowing form submission.

On the custom element in the DOM (narrow the selector, e.g. to #my-form, if you host multiple widgets):

document.querySelector('smart-form')?.validate();

Try a demo showcasing the validate method.