Form JAVASCRIPT UI Component API

Form Javascript API

Class

Form

Reactive Form Component with Advanced Validation

Properties

appendstring

HTML Content displayed after the Form Control

Default value

Get the append property.

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

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

controlOptionsany

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.

Get the controlOptions property.

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

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

controlType"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"

Get the controlType property.

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

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

columnsnumber

Sets the Form Group columns.

Default value

Get the columns property.

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

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

columnSpannumber

Sets the Form control column span.

Default value

Get the columnSpan property.

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

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

controls[]

Properties

appendstring

HTML Content displayed after the Form Control

Default value

Get the append property.

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

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

controlOptionsany

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.

Get the controlOptions property.

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

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

controlType"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"

Get the controlType property.

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

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

columnsnumber

Sets the Form Group columns.

Default value

Get the columns property.

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

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

columnSpannumber

Sets the Form control column span.

Default value

Get the columnSpan property.

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

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

dataFieldstring

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

Get the dataField property.

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

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

disabledboolean

Sets the Form control disabled mode.

Default value

false

Get the disabled property.

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

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

dirtyboolean

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

Default value

false

Get the dirty property.

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

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

infostring

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

Default value

Get the info property.

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

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

invalidboolean

Gets whether the Form control is invalid.

Default value

false

Get the invalid property.

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

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

labelstring

Gets or Sets the Form control's label.

Default value

Get the label property.

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

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

labelPosition"left" | "top"

Gets or Sets the Form control's label position.

Default value

"left"

Get the labelPosition property.

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

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

labelOffsetnumber

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

Default value

Get the labelOffset property.

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

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

labelAlignstring

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"

Get the labelAlign property.

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

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

nextButtonLabelstring

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

Default value

"Next"

Get the nextButtonLabel property.

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

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

backButtonLabelstring

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

Default value

"Back"

Get the backButtonLabel property.

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

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

prependstring

HTML Content displayed before the Form Control

Default value

Get the prepend property.

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

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

readonlyboolean

Gets or Sets the Form control readonly mode.

Default value

false

Get the readonly property.

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

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

untouchedboolean

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

Get the untouched property.

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

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

placeholderstring

Gets or Sets the placeholder.

Default value

Get the placeholder property.

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

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

showButtonsboolean

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

Get the showButtons property.

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

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

valueany

Sets or Gets the Form control or Form group value.

Get the value property.

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

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

validboolean

Gets whether the Form control is valid.

Default value

false

Get the valid property.

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

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

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.

Example

Set the validationRules property by using the HTML Element's instance.

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

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

Get the validationRules property.

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

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

viewMode"" | "accordion" | "tabs" | "breadcrumb"

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

Default value

Get the viewMode property.

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

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

Get the controls property.

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

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

dataFieldstring

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

Get the dataField property.

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

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

disabledboolean

Sets the Form control disabled mode.

Default value

false

Get the disabled property.

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

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

dirtyboolean

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

Default value

false

Get the dirty property.

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

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

infostring

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

Default value

Get the info property.

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

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

invalidboolean

Gets whether the Form control is invalid.

Default value

false

Get the invalid property.

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

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

labelstring

Gets or Sets the Form control's label.

Default value

Get the label property.

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

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

labelPosition"left" | "top"

Gets or Sets the Form control's label position.

Default value

"left"

Get the labelPosition property.

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

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

labelOffsetnumber

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

Default value

Get the labelOffset property.

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

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

labelAlignstring

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"

Get the labelAlign property.

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

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

nextButtonLabelstring

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

Default value

"Next"

Get the nextButtonLabel property.

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

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

backButtonLabelstring

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

Default value

"Back"

Get the backButtonLabel property.

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

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

prependstring

HTML Content displayed before the Form Control

Default value

Get the prepend property.

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

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

readonlyboolean

Gets or Sets the Form control readonly mode.

Default value

false

Get the readonly property.

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

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

untouchedboolean

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

Get the untouched property.

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

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

placeholderstring

Gets or Sets the placeholder.

Default value

Get the placeholder property.

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

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

showButtonsboolean

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

Get the showButtons property.

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

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

valueany

Sets or Gets the Form control or Form group value.

Get the value property.

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

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

validboolean

Gets whether the Form control is valid.

Default value

false

Get the valid property.

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

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

validationRules[] | null

Example

Set the validationRules property by using the HTML Element's instance.

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

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

Get the validationRules property.

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

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

viewMode"" | "accordion" | "tabs" | "breadcrumb"

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

Default value

Get the viewMode property.

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

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

Example

Set the controls property.

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

Set the controls property by using the HTML Element's instance.

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

 form.controls = ;

Get the controls property.

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

 let controls = form.controls;

onStatusChanges{(value: string): void}

Callback function for handling status changes. The status could be 'disabled', 'invalid', 'pending', 'valid'.

onValueChanges{(value: any): void}

Callback function for handling value changes. The function argument is the form's value as a JSON object.

labelPosition"left" | "top"

Sets or Gets the labels position.

Default value

"left"

readonlyboolean

Makes the form readonly.

Default value

false

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

showColonAfterLabelboolean

Shows / hides the colon after the labels.

Default value

false

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

showSummaryboolean

Shows / hides validation summary.

Default value

true

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

stateany

Gets the Form's state. Each member in the state has { dirty, untouched, disabled } properties.

valueany

Gets or Sets the Form value.

validateOnLoadboolean

Automatically validates the form when it is created.

Default value

false

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

Methods

addControl( controlOptions: any): void

Adds a control to the Form.

Arguments

controlOptionsany

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

Invoke the addControl method.

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

getControl( dataField: string): Control

Gets a control by its name(dataField).

Arguments

dataFieldstring

dataField of a FormControl or FormGroup

ReturnsControl

Invoke the getControl method.

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

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

Inserts a control to the Form.

Arguments

indexnumber

Control insert index

controlOptionsany

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

Invoke the insertControl method.

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

removeControl( controlOptions: any): void

Remove a control from the Form.

Arguments

controlOptionsany

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

Invoke the removeControl method.

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

submit( submitOptions?: any): void

Submits the form.

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.

Invoke the submit method.

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

reset(): void

Clears the form.

Invoke the reset method.

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

validate(): void

Validates the form.

Invoke the validate method.

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