Form JAVASCRIPT UI Component API

Form Javascript API

Class

Form

Reactive Form Component with Advanced Validation

Selector

smart-form

Properties

CcolumnsSets or gets the form columns.
CcontrolsSets or gets the form controls. Click for more details. Property object's options:
  • append:string - HTML Content displayed after the Form Control
  • controlOptions: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.
  • controlType:string - The type of the control.
  • columns:number - Sets the Form Group columns.
  • columnSpan:number - Sets the Form control column span.
  • controls:[]
  • Property object's options:
    • append:string - HTML Content displayed after the Form Control
    • controlOptions: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.
    • controlType:string - The type of the control.
    • columns:number - Sets the Form Group columns.
    • columnSpan:number - Sets the Form control column span.
    • dataField: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.
    • disabled:boolean - Sets the Form control disabled mode.
    • dirty:boolean - Gets whether the Form control is 'dirty' i.e its value is changed by the user.
    • info:string - Gets or Sets the Form control's info icon's tooltip.
    • invalid:boolean - Gets whether the Form control is invalid.
    • label:string - Gets or Sets the Form control's label.
    • labelPosition:string - Gets or Sets the Form control's label position.
    • labelOffset:number - Gets or Sets the offset between the label and the control.
    • labelAlign: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.
    • nextButtonLabel:string - FormGroup only(when controlType is set to 'group'). Gets or Sets the next button label.
    • backButtonLabel:string - FormGroup only(when controlType is set to 'group'). Gets or Sets the back button label.
    • prepend:string - HTML Content displayed before the Form Control
    • readonly:boolean - Gets or Sets the Form control readonly mode.
    • untouched:boolean - 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
    • placeholder:string - Gets or Sets the placeholder.
    • showButtons: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.
    • value:any - Sets or Gets the Form control or Form group value.
    • valid:boolean - Gets whether the Form control is valid.
    • validationRules:[] | 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.
    • viewMode:string - FormGroup only(when controlType is set to 'group'). Gets or Sets the form'group view mode.
  • dataField: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.
  • disabled:boolean - Sets the Form control disabled mode.
  • dirty:boolean - Gets whether the Form control is 'dirty' i.e its value is changed by the user.
  • info:string - Gets or Sets the Form control's info icon's tooltip.
  • invalid:boolean - Gets whether the Form control is invalid.
  • label:string - Gets or Sets the Form control's label.
  • labelPosition:string - Gets or Sets the Form control's label position.
  • labelOffset:number - Gets or Sets the offset between the label and the control.
  • labelAlign: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.
  • nextButtonLabel:string - FormGroup only(when controlType is set to 'group'). Gets or Sets the next button label.
  • backButtonLabel:string - FormGroup only(when controlType is set to 'group'). Gets or Sets the back button label.
  • prepend:string - HTML Content displayed before the Form Control
  • readonly:boolean - Gets or Sets the Form control readonly mode.
  • untouched:boolean - 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
  • placeholder:string - Gets or Sets the placeholder.
  • showButtons: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.
  • value:any - Sets or Gets the Form control or Form group value.
  • valid:boolean - Gets whether the Form control is valid.
  • validationRules:[] | 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.
  • Property object's options:
    • viewMode:string - FormGroup only(when controlType is set to 'group'). Gets or Sets the form'group view mode.
    OonStatusChangesCallback function for handling status changes. The status could be 'disabled', 'invalid', 'pending', 'valid'.
    OonValueChangesCallback function for handling value changes. The function argument is the form's value as a JSON object.
    LlabelPositionSets or Gets the labels position.
    RreadonlyMakes the form readonly.
    SshowColonAfterLabelShows / hides the colon after the labels.
    SshowSummaryShows / hides validation summary.
    SstateGets the Form's state. Each member in the state has { dirty, untouched, disabled } properties.
    VvalueGets or Sets the Form value.
    VvalidateOnLoadAutomatically validates the form when it is created.

    Methods

    AaddControlAdds a control to the Form.
    GgetControlGets a control by its name(dataField).
    IinsertControlInserts a control to the Form.
    RremoveControlRemove a control from the Form.
    SsubmitSubmits the form.
    RresetClears the form.
    VvalidateValidates the form.

    Properties

    columnsnumber

    Sets or gets the form columns.

    Default value

    1

    controls[]

    Sets or gets the form 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"].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

    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;

    controls[]

    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

    1

    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

    1

    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

    10

    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;

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

    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

    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;

    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

    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"].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();