Form Javascript API

Class

Form

Reactive Form Component with Advanced Validation

Selector

smart-form

Properties

Methods

Properties

columnsnumber

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

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.

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

 let append = form.controls["firstName"].append;

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

 let controlOptions = form.controls["firstName"].controlOptions;

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

 let controlType = form.controls["firstName"].controlType;

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

 let columns = form.controls["firstName"].columns;

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

 let columnSpan = form.controls["firstName"].columnSpan;

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

 let append = form.controls["firstName"].controls["firstName"].append;

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

 let controlOptions = form.controls["firstName"].controls["firstName"].controlOptions;

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

 let controlType = form.controls["firstName"].controls["firstName"].controlType;

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

 let columns = form.controls["firstName"].controls["firstName"].columns;

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

 let columnSpan = form.controls["firstName"].controls["firstName"].columnSpan;

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

 let dataField = form.controls["firstName"].controls["firstName"].dataField;

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

 let disabled = form.controls["firstName"].controls["firstName"].disabled;

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

 let dirty = form.controls["firstName"].controls["firstName"].dirty;

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

 let info = form.controls["firstName"].controls["firstName"].info;

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

 let invalid = form.controls["firstName"].controls["firstName"].invalid;

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

 let label = form.controls["firstName"].controls["firstName"].label;

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

 let labelPosition = form.controls["firstName"].controls["firstName"].labelPosition;

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

 let labelOffset = form.controls["firstName"].controls["firstName"].labelOffset;

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

 let labelAlign = form.controls["firstName"].controls["firstName"].labelAlign;

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

 let nextButtonLabel = form.controls["firstName"].controls["firstName"].nextButtonLabel;

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

 let backButtonLabel = form.controls["firstName"].controls["firstName"].backButtonLabel;

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

 let prepend = form.controls["firstName"].controls["firstName"].prepend;

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

 let readonly = form.controls["firstName"].controls["firstName"].readonly;

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

 let untouched = form.controls["firstName"].controls["firstName"].untouched;

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

 let placeholder = form.controls["firstName"].controls["firstName"].placeholder;

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

 let showButtons = form.controls["firstName"].controls["firstName"].showButtons;

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

 let value = form.controls["firstName"].controls["firstName"].value;

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

 let valid = form.controls["firstName"].controls["firstName"].valid;

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

 form.controls["firstName"].controls["firstName"].validationRules = {type: 'email'};

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

 let validationRules = form.controls["firstName"].controls["firstName"].validationRules;

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

 let viewMode = form.controls["firstName"].controls["firstName"].viewMode;

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

 let controls = form.controls["firstName"].controls;

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

 let dataField = form.controls["firstName"].dataField;

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

 let disabled = form.controls["firstName"].disabled;

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

 let dirty = form.controls["firstName"].dirty;

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

 let info = form.controls["firstName"].info;

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

 let invalid = form.controls["firstName"].invalid;

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

 let label = form.controls["firstName"].label;

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

 let labelPosition = form.controls["firstName"].labelPosition;

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

 let labelOffset = form.controls["firstName"].labelOffset;

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

 let labelAlign = form.controls["firstName"].labelAlign;

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

 let nextButtonLabel = form.controls["firstName"].nextButtonLabel;

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

 let backButtonLabel = form.controls["firstName"].backButtonLabel;

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

 let prepend = form.controls["firstName"].prepend;

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

 let readonly = form.controls["firstName"].readonly;

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

 let untouched = form.controls["firstName"].untouched;

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

 let placeholder = form.controls["firstName"].placeholder;

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

 let showButtons = form.controls["firstName"].showButtons;

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

 let value = form.controls["firstName"].value;

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

 let valid = form.controls["firstName"].valid;

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

 form.controls["firstName"].validationRules = {type: 'email'};

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

 let validationRules = form.controls["firstName"].validationRules;

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

 let viewMode = form.controls["firstName"].viewMode;

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

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

 form.controls = ;

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

 let controls = form.controls;

onStatusChanges{(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.

onValueChanges{(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.

labelPosition"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).

readonlyboolean

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

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

showColonAfterLabelboolean

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.

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

showSummaryboolean

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

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

statusany

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

valueany

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.

validateOnLoadboolean

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.

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

Methods

addControl( controlOptions: any): void

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.

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

getControl( dataField: string): Control

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

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

insertControl( index: number, controlOptions: any): void

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.

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

removeControl( controlOptions: any): void

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.

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

submit( submitOptions?: any): void

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.

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

reset(): void

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

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

validate(): void

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.

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