Form JAVASCRIPT UI Component API

Form Javascript API

Class

Form

Reactive Form Component with Advanced Validation

Selector

smart-form

Properties

Methods

Properties

columnsnumber

Sets or gets the form columns.

Default value

1

controls[]

Properties

appendHTMLany

HTML Content displayed after the Form Control

Default value

""

Get the appendHTML property.

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

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.

Default value

""

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.

Default value

""

Get the controlType property.

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

columnsnumber

Sets the Form Group columns.

Default value

1

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

1

Get the columnSpan property.

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

dataFieldboolean

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

false

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

""

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

10

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;

prependHTMLany

HTML Content displayed before the Form Control

Default value

""

Get the prependHTML property.

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

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;

showColonAfterLabelboolean

Gets or Sets whether colon is displayed after the label.

Default value

false

Get the showColonAfterLabel property.

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

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[]

Validation rules array. Accepts any Smart.Validator rules.

Default value

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;

onStatusChangesany

Callback function for handling status changes

onValueChangesany

Callback function for handling value changes

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.

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();