Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/ApiReference/UI_Components/dxForm/Configuration/ below:

Vue Form Props | Vue Documentation

An object defining configuration properties for the Form UI component.

Specifies the shortcut key that sets focus on the UI component.

Selector: access-key

Default Value: undefined

The value of this property will be passed to the accesskey attribute of the HTML element that underlies the UI component.

Specifies whether the UI component changes its visual state as a result of user interaction.

Selector: active-state-enabled

Default Value: false

The UI component switches to the active state when users press down the primary mouse button. When this property is set to true, the CSS rules for the active state apply. You can change these rules to customize the component.

Use this property when you display the component on a platform whose guidelines include the active state change for UI components.

Specifies whether all item labels are aligned. Applies only to labels outside their editors (see labelMode).

Selector: align-item-labels

Default Value: true

Specifies whether item labels in all groups are aligned. Applies only to labels outside their editors (see labelMode).

Selector: align-item-labels-in-all-groups

Default Value: true

• This property applies only to those simple items that are nested within a group item. Thus, we recommend that you do not leave any simple items ungrouped if you need a consistent alignment throughout the Form.

• The labelLocation property value varies based on the theme (Generic or Material/Fluent). Adjust this setting if item labels are misaligned.

The count of columns in the form layout.

Selector: col-count

Default Value: 1

Specifies dependency between the screen factor and the count of columns in the form layout.

Selector: DxColCountByScreen

Default Value: undefined

The following code sample illustrates how to set this property:

$(function() {
    $("#formContainer").dxForm({
        // ...
        colCountByScreen: {
            xs: 2
        }
    });
});

<dx-form ... >
    <dxo-col-count-by-screen [xs]="2"></dxo-col-count-by-screen>
</dx-form>

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

<template>
    <DxForm ...>
        <DxColCountByScreen :xs="2"/>
    </DxForm>
</template>
<script>
import DxForm, { DxColCountByScreen } from 'devextreme-vue/form';

export default {
    components: {
        DxForm,
        DxColCountByScreen
    }
}
</script>

import React from 'react';
import Form, { ColCountByScreen } from 'devextreme-react/form';

const App = () => {
    return (
        <Form ...>
            <ColCountByScreen xs={2} />
        </Form>
    );
};

export default App;

View Demo

Specifies a function that customizes a form item after it has been created.

If you did not define form items using the items property, the Form UI component creates them automatically according to the structure of an object passed to the formData property. The customizeItem property enables you to modify properties of each generated item before this item is rendered. Each generated item passed to this function as an argument has a Simple Item structure.

If the items property contains definition for form items, you usually do not need to pass a function to the customizeItem property because you can customize items before passing them to the items property. However, if you assign a function to this property, it will be called for each item. In this case, an item can have structure corresponding to one of the item types.

• Customize a Simple Item

Specifies whether the UI component responds to user interaction.

Specifies the global attributes to be attached to the UI component's container element.

Selector: DxElementAttr

Default Value: {}

$(function(){
    $("#formContainer").dxForm({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<dx-form ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-form>

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

<template>
    <DxForm ...
        :element-attr="formAttributes">
    </DxForm>
</template>

<script>
import DxForm from 'devextreme-vue/form';

export default {
    components: {
        DxForm
    },
    data() {
        return {
            formAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

import React from 'react';

import Form from 'devextreme-react/form';

class App extends React.Component {
    formAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Form ...
                elementAttr={this.formAttributes}>
            </Form>
        );
    }
}
export default App;

Specifies whether the UI component can be focused using keyboard navigation.

Selector: focus-state-enabled

Default Value: false

Provides the Form's data. Gets updated every time form fields change.

Selector: form-data

Type: any

Default Value: {}

Specifies the UI component's height.

This property accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".

Specifies text for a hint that appears when a user pauses on the UI component.

Specifies whether the UI component changes its state when a user pauses on it.

Selector: hover-state-enabled

Default Value: false

Specifies whether current editor values differ from initial values.

Selector: is-dirty

Default Value: false

This property is a read-only flag. You can use it to check if any editor value changed on this Form.

• Specify the dataField of each Form item for this property to take effect.

• If you use DateBox or DateRangeBox as a Form item, and users enter invalid dates, the isDirty value does not change.

• This property works only for predefined editors and does not work with custom templates.

View Demo

• reset

Specifies the location of a label against the editor. Applies only to labels outside their editors (see labelMode).

Selector: label-location

Default Value: 'left', 'top' (Fluent, Material)

Specifies a display mode for item labels.

Selector: label-mode

Default Value: 'outside'

This property can have one of the following values:

This property specifies a display mode for all item labels. If you want to override the mode for an individual label, specify the labelMode property within editorOptions.

Please review the following notes:

• The following editors do not support "static" and "floating" modes and will default to "outside" mode:

  • "dxCalendar"
  • "dxCheckBox"
  • "dxHtmlEditor"
  • "dxRadioGroup"
  • "dxRangeSlider"
  • "dxSlider"
  • "dxSwitch"

• If autofill is enabled in the browser, we do not recommend that you use "floating" mode. The autofill values will overlap the label when it is displayed as a placeholder. Use "static" mode instead.

The minimum column width used for calculating column count in the form layout. Applies only if colCount property is "auto".

Selector: min-col-width

Default Value: 200

View Demo

The actual column width equals the UI component width divided by the column count.

A function that is executed when the UI component is rendered and each time the component is repainted.

Selector: @content-ready

Information about the event.

Object structure:

Default Value: null

A function that is executed before the UI component is disposed of.

Selector: @disposing

Information about the event.

Object structure:

Default Value: null

A function that is executed when the Enter key has been pressed while an editor is focused.

Selector: @editor-enter-key

Information about the event.

Object structure:

Default Value: null

This function is executed only if the editor raises the

event. See the

section in the editor's API reference for the list of events the editor can raise. If the

event is absent from the list, but you need to handle the Enter key press,

.

A function that is executed when the value of a formData object field is changed.

Selector: @field-data-changed

Information about the event.

Object structure:

Default Value: null

A function used in JavaScript frameworks to save the UI component instance.

Selector: @initialized

Information about the event.

Object structure:

Default Value: null

<dx-form ...
    (onInitialized)="saveInstance($event)">
</dx-form>

import { Component } from "@angular/core";
import Form from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    formInstance: Form;
    saveInstance (e) {
        this.formInstance = e.component;
    }
}

App.vue (Composition API)

<template>
    <div>
        <DxForm ...
            @initialized="saveInstance">
        </DxForm>
    </div>
</template>

<script>
import DxForm from 'devextreme-vue/form';

export default {
    components: {
        DxForm
    },
    data: function() {
        return {
            formInstance: null
        };
    },
    methods: {
        saveInstance: function(e) {
            this.formInstance = e.component;
        }
    }
};
</script>

<template>
    <div>
        <DxForm ...
            @initialized="saveInstance">
        </DxForm>
    </div>
</template>

<script setup>
import DxForm from 'devextreme-vue/form';

let formInstance = null;

const saveInstance = (e) => {
    formInstance = e.component;
}
</script>

import Form from 'devextreme-react/form';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.formInstance = e.component;
    }

    render() {
        return (
            <div>
                <Form onInitialized={this.saveInstance} />
            </div>
        );
    }
}

• Get a UI component Instance in jQuery

• Get a UI component Instance in Angular

• Get a UI component Instance in Vue

• Get a UI component Instance in React

A function that is executed after a UI component property is changed.

Selector: @option-changed

Information about the event.

Object structure:

The modified property's new value.

The UI component's previous value.

String

The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.

String

The path to the modified property that includes all parent properties.

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Form

The UI component's instance.

Default Value: null

The following example shows how to subscribe to component property changes:

$(function() {
    $("#formContainer").dxForm({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<dx-form ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-form>

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxFormModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxFormModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }  

<template> 
    <DxForm ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxForm from 'devextreme-vue/form'; 

export default { 
    components: { 
        DxForm
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Form from 'devextreme-react/form'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Form ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

The text displayed for optional fields. Applies only if showOptionalMark is true.

Selector: optional-mark

Default Value: 'optional'

In

or

, form items use the

property value as help text if the

property is not specified.

• Additional Marks

Specifies whether all editors on the form are read-only. Applies only to non-templated items.

Selector: read-only

Default Value: false

View Demo

Item

override general Form parameters. For example, if you set

to

for one of the Form editors, it will be read-only while Form is not.

The text displayed for required fields.

Selector: required-mark

Default Value: '*'

Specifies the message that is shown for end-users if a required field value is not specified.

Selector: required-message

Default Value: '{0} is required'

Switches the UI component to a right-to-left representation.

Selector: rtl-enabled

Default Value: false

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

DevExpress.config({
    rtlEnabled: true
});

DataGrid Demo Navigation UI Demo Editors Demo

Specifies a function that categorizes screens by their width.

Selector: screen-by-width

Default Value: null

The UI component uses the following size qualifiers to categorize screens by width:

Implement the screenByWidth function to change the relation between a size qualifier and screen width. This function accepts the screen width and should return a size qualifier. The following code shows the function's default implementation that you can customize:

$(function() {
    $("#formContainer").dxForm({
        // ...
        screenByWidth: function(width) {
            if (width < 768) return "xs";
            if (width < 992) return "sm";
            if (width < 1200) return "md";
            return "lg";
        }
    });
});

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
    getSizeQualifier(width) {
        if (width < 768)  return "xs";
        if (width < 992)  return "sm";
        if (width < 1200) return "md";
        return "lg";
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

<dx-form ...
    [screenByWidth]="getSizeQualifier">
</dx-form>

<template>
    <DxForm ...
        :screen-by-width="getSizeQualifier">
        <!-- ... -->
    </DxForm>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxForm, {
    // ...
} from 'devextreme-vue/form';

export default {
    components: {
        DxForm,
        // ...
    },
    // ...
    methods: {
        getSizeQualifier(width) {
            if (width < 768)  return "xs";
            if (width < 992)  return "sm";
            if (width < 1200) return "md";
            return "lg";
        }
    }
}
</script>

import 'devextreme/dist/css/dx.light.css';

import Form, {
    // ...
} from 'devextreme-react/form';

const getSizeQualifier = (width) => {
    if (width < 768)  return "xs";
    if (width < 992)  return "sm";
    if (width < 1200) return "md";
    return "lg";
};

export default function App() {
    return (
        <Form ...
            screenByWidth={getSizeQualifier}>
            {/* ... */}
        </Form>
    );
}

View Demo

A Boolean value specifying whether to enable or disable form scrolling.

Selector: scrolling-enabled

Default Value: false

Specifies whether a colon is displayed at the end of form labels. Applies only to labels outside their editors (see labelMode).

Selector: show-colon-after-label

Default Value: true, false (Material)

View Demo

Specifies whether or not the optional mark is displayed for optional fields.

Selector: show-optional-mark

Default Value: false

Specifies whether or not the required mark is displayed for required fields.

Selector: show-required-mark

Default Value: true

Specifies whether or not the total validation summary is displayed on the form.

Selector: show-validation-summary

Default Value: false

View Demo

Specifies the number of the element when the Tab key is used for navigating.

Selector: tab-index

Default Value: 0

The value of this property will be passed to the tabindex attribute of the HTML element that underlies the UI component.

Gives a name to the internal validation group.

Selector: validation-group

Default Value: undefined

In some cases, the Form editors should be validated by the Button UI component. Editors are collected in an unnamed validation group that makes it impossible for the Button to validate them. In this case, use the validationGroup property of the Form UI component to give this validation group a name. Also, pass the same name to the validationGroup property of the Button UI component.

$(function () {
    $("#formContainer").dxForm({
        // ...
        validationGroup: "groupName"
    });

    $("#buttonContainer").dxButton({
        // ...
        validationGroup: "groupName",
        onClick: function (e) {
            e.validationGroup.validate();
        }
    });
})

Form is not designed to work with validationGroup shared with other components. When a Form is disposed of, it disposes of the associated validationGroup object and other components fail with an error.

View Demo

View on GitHub

Specifies whether the UI component is visible.

Specifies the UI component's width.

This property accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "20vw", "80%", "auto", "inherit".

View Demo

Even if the width of the UI component is specified, the count of columns may depend on the screen width. For example, if the screen width is not enough to display the whole form's container, the count of columns depends on the screen width, not the container. To always use a fixed count of columns regardless of the screen width, pass an empty function to the screenByWidth property.

screenByWidth: function() { }

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4