Movatterモバイル変換

[0]ホーム
URL:

newupdatedpro

  • Overview

  • Framework and Utilities

  • Angular

  • React

  • Vue

  • Blazor

  • Integrations

  • Roadmap

  • Release Notes

  • Accessibility

  • Theme Builder

  • Complex Components

  • Grid

  • Gantt Chart

  • Scheduler

  • CardView

  • Chart

  • Editor

  • DockingLayout

  • Kanban

  • PivotTable

  • Table

  • Core Components

  • Accordion

  • Badge

  • Barcode

  • Button

  • Breadcrumb

  • Card

  • Carousel

  • Calendar

  • CheckBox

  • ComboBox

  • ColorPicker

  • DateTimePicker

  • DropDownList

  • DropDownButton

  • FileUpload

  • Form

  • Gauge

  • Input

  • ListBox

  • ListMenu

  • Layout

  • MaskedTextBox

  • Menu

  • MultilineTextBox

  • MultiSplitButton

  • NumericTextBox

  • Pager

  • PasswordTextBox

  • PowerButton

  • ProgressBar

  • QueryBuilder

  • RadioButton

  • Rating

  • RepeatButton

  • Ribbon Bar

  • Qrcode

  • ScrollBar

  • Slider

  • Splitter

  • SwitchButton

  • Sortable

  • Tabs

  • Tank

  • TextBox

  • TimePicker

  • Toast

  • ToggleButton

  • Tooltip

  • Tree

  • Window

Form JAVASCRIPT UI Component API

Form Javascript API

Class

Form

Form

Reactive Form Component with Advanced Validation

Selector

smart-form

Properties

CcolumnsDefines or retrieves the number of columns used to arrange form fields, determining how fields are organized and displayed within the form layout.
CcontrolsGets 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:
  • 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 thedataSource 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 thedataSource 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 thedataField value and in the FormGroup it is accessible through thedataField 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(whencontrolType is set to'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when theviewMode property is set.
    • nextButtonLabel:string - FormGroup only(whencontrolType is set to'group'). Gets or Sets the next button label.
    • backButtonLabel:string - FormGroup only(whencontrolType 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(whencontrolType is set to'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when theviewMode 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(whencontrolType 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 thedataField value and in the FormGroup it is accessible through thedataField 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(whencontrolType is set to'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when theviewMode property is set.
  • nextButtonLabel:string - FormGroup only(whencontrolType is set to'group'). Gets or Sets the next button label.
  • backButtonLabel:string - FormGroup only(whencontrolType 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(whencontrolType is set to'group'). Gets or Sets whether the navigation buttons are displayed. The property has effect when theviewMode 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(whencontrolType is set to'group'). Gets or Sets the form'group view mode.
    OonStatusChangesCallback 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.
    OonValueChangesCallback 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.
    LlabelPositionDefines 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).
    RreadonlySets all form fields to read-only mode, preventing users from modifying their input while still allowing them to view the existing data.
    SshowColonAfterLabelControls 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.
    SshowSummaryToggles the visibility of the validation summary, allowing users to display or hide a list of validation errors based on form input.
    SstatusRetrieves the current status of the Form. Each entry within thestatus 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), anddisabled (indicates if the field is currently disabled).
    VvalueRetrieves 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.
    VvalidateOnLoadAutomatically 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.

    Methods

    AaddControlInserts a new control element, such as an input field, button, or checkbox, into the Form, allowing users to interact with and submit data.
    GgetControlRetrieves 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.
    IinsertControlAdds 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.
    RremoveControlRemoves a specified control element from the Form, ensuring it is no longer rendered or managed as part of the Form's structure and behavior.
    SsubmitTriggers 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.
    RresetResets all fields in the form to their initial, default values, effectively clearing any user input or changes made.
    VvalidatePerforms 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.

    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.

    Default value

    1

    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

    appendstring

    HTML Content displayed after the Form Control

    Default value

    ""

    Get theappend 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 thedataSource property of the Form control.

    Get thecontrolOptions 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 toFormGroup.
    • "input" - Text input control.
    • "label" - Label control.
    • "multiInput" - Multi input control.
    • "multiComboInput" - Multi combo input control.
    • "mask" - Masked text input. Themask 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, theoptions property defines the Array of radio buttons. TheoptionsLayout 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. Thetemplate property should be set to any HTML string.

    Default value

    "input"

    Get thecontrolType property.

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

    columnsnumber

    Sets the Form Group columns.

    Default value

    1

    Get thecolumns property.

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

    columnSpannumber

    Sets the Form control column span.

    Default value

    1

    Get thecolumnSpan 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 theappend 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 thedataSource property of the Form control.

    Get thecontrolOptions 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 toFormGroup.
    • "input" - Text input control.
    • "label" - Label control.
    • "multiInput" - Multi input control.
    • "multiComboInput" - Multi combo input control.
    • "mask" - Masked text input. Themask 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, theoptions property defines the Array of radio buttons. TheoptionsLayout 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. Thetemplate property should be set to any HTML string.

    Default value

    "input"

    Get thecontrolType 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 thecolumns 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 thecolumnSpan 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 thedataField value and in the FormGroup it is accessible through thedataField value.

    Default value

    ""

    Get thedataField 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 thedisabled 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 thedirty 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 theinfo 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 theinvalid 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 thelabel 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 thelabelPosition 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 thelabelOffset property.

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

    labelAlignstring

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

    Default value

    "left"

    Get thelabelAlign property.

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

    nextButtonLabelstring

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

    Default value

    "Next"

    Get thenextButtonLabel property.

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

    backButtonLabelstring

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

    Default value

    "Back"

    Get thebackButtonLabel 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 theprepend 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 thereadonly 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 theuntouched property.

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

    placeholderstring

    Gets or Sets the placeholder.

    Default value

    ""

    Get theplaceholder property.

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

    showButtonsboolean

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

    Default value

    false

    Get theshowButtons 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 thevalue 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 thevalid 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 thevalidationRules property by using the HTML Element's instance.

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

    Get thevalidationRules property.

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

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

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

    Default value

    ""

    Get theviewMode property.

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

    Get thecontrols 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 thedataField value and in the FormGroup it is accessible through thedataField value.

    Default value

    ""

    Get thedataField property.

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

    disabledboolean

    Sets the Form control disabled mode.

    Default value

    false

    Get thedisabled 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 thedirty 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 theinfo 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 theinvalid 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 thelabel 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 thelabelPosition 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 thelabelOffset property.

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

    labelAlignstring

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

    Default value

    "left"

    Get thelabelAlign property.

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

    nextButtonLabelstring

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

    Default value

    "Next"

    Get thenextButtonLabel property.

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

    backButtonLabelstring

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

    Default value

    "Back"

    Get thebackButtonLabel property.

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

    prependstring

    HTML Content displayed before the Form Control

    Default value

    ""

    Get theprepend 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 thereadonly 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 theuntouched property.

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

    placeholderstring

    Gets or Sets the placeholder.

    Default value

    ""

    Get theplaceholder property.

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

    showButtonsboolean

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

    Default value

    false

    Get theshowButtons 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 thevalue 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 thevalid 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 thevalidationRules property by using the HTML Element's instance.

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

    Get thevalidationRules property.

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

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

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

    Default value

    ""

    Get theviewMode property.

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

    Example

    Set thecontrols property.

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

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

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

    Get thecontrols property.

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

    Default value

    "left"

    readonlyboolean

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

    Default value

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

    Default value

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

    statusany

    Retrieves the current status of the Form. Each entry within thestatus 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), anddisabled (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.

    Default value

    false
     <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 thecontrols property.


    Invoke theaddControl method.

    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

    Invoke thegetControl method.

    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 thecontrols property.


    Invoke theinsertControl method.

    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 thecontrols property.


    Invoke theremoveControl method.

    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.


    Invoke thesubmit method.

    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.


    Invoke thereset method.

    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.


    Invoke thevalidate method.

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

    [8]ページ先頭
    ©2009-2025 Movatter.jp