React Form Methods
beginUpdate()
Postpones rendering that can negatively affect performance until the endUpdate() method is called.
The beginUpdate() and endUpdate() methods reduce the number of renders in cases where extra rendering can negatively affect performance.
See Also
defaultOptions(rule)
| Name | Type | Description |
|---|---|---|
| device | | |
Device parameters. |
| options |
Options to be applied. |
defaultOptions is a static method that the UI component class supports. The following code demonstrates how to specify default properties for all instances of the Form UI component in an application executed on the desktop.
jQuery
DevExpress.ui.dxForm.defaultOptions({
device: { deviceType: "desktop" },
options: {
// Here go the Form properties
}
});Angular
import Form, { Properties } from "devextreme/ui/form";
// ...
export class AppComponent {
constructor () {
Form.defaultOptions<Properties>({
device: { deviceType: "desktop" },
options: {
// Here go the Form properties
}
});
}
}Vue
<template>
<div>
<DxForm id="form1" />
<DxForm id="form2" />
</div>
</template>
<script>
import DxForm from "devextreme-vue/form";
import Form from "devextreme/ui/form";
Form.defaultOptions({
device: { deviceType: "desktop" },
options: {
// Here go the Form properties
}
});
export default {
components: {
DxForm
}
}
</script>React
import dxForm from "devextreme/ui/form";
import Form from "devextreme-react/form";
dxForm.defaultOptions({
device: { deviceType: "desktop" },
options: {
// Here go the Form properties
}
});
export default function App() {
return (
<div>
<Form id="form1" />
<Form id="form2" />
</div>
)
}You can also set rules for multiple device types:
jQuery
const devicesConfig = [
{ deviceType: 'desktop' },
{ deviceType: 'tablet' },
{ deviceType: 'phone' },
];
devicesConfig.forEach(deviceConfig => {
DevExpress.ui.dxForm.defaultOptions({
device: deviceConfig,
options: {
// Here go the Form properties
}
});
});Angular
import Form, { Properties } from "devextreme/ui/form";
// ...
export class AppComponent {
constructor () {
const devicesConfig = [
{ deviceType: 'desktop' },
{ deviceType: 'tablet' },
{ deviceType: 'phone' },
];
devicesConfig.forEach(deviceConfig => {
Form.defaultOptions<Properties>({
device: deviceConfig,
options: {
// Here go the Form properties
}
});
});
}
}Vue
<template>
<div>
<DxForm />
</div>
</template>
<script>
import DxForm from "devextreme-vue/form";
import Form from "devextreme/ui/form";
const devicesConfig = [
{ deviceType: 'desktop' },
{ deviceType: 'tablet' },
{ deviceType: 'phone' },
];
devicesConfig.forEach(deviceConfig => {
Form.defaultOptions({
device: deviceConfig,
options: {
// Here go the Form properties
}
});
});
export default {
components: {
DxForm
}
}
</script>React
import dxForm from "devextreme/ui/form";
import Form from "devextreme-react/form";
const devicesConfig = [
{ deviceType: 'desktop' },
{ deviceType: 'tablet' },
{ deviceType: 'phone' },
];
devicesConfig.forEach(deviceConfig => {
dxForm.defaultOptions({
device: deviceConfig,
options: {
// Here go the Form properties
}
});
});
export default function App() {
return (
<div>
<Form />
</div>
)
}dispose()
jQuery
After calling this method, remove the DOM element associated with the UI component:
$("#myForm").dxForm("dispose");
$("#myForm").remove();Angular
Use conditional rendering instead of this method:
<dx-form ...
*ngIf="condition">
</dx-form>Vue
Use conditional rendering instead of this method:
<template>
<DxForm ...
v-if="condition">
</DxForm>
</template>
<script>
import DxForm from 'devextreme-vue/form';
export default {
components: {
DxForm
}
}
</script>React
Use conditional rendering instead of this method:
import React from 'react';
import Form from 'devextreme-react/form';
function DxForm(props) {
if (!props.shouldRender) {
return null;
}
return (
<Form ... >
</Form>
);
}
class App extends React.Component {
render() {
return (
<DxForm shouldRender="condition" />
);
}
}
export default App;endUpdate()
Refreshes the UI component after a call of the beginUpdate() method.
The beginUpdate() and endUpdate() methods reduce the number of renders in cases where extra rendering can negatively affect performance.
See Also
getEditor(dataField)
The following code shows how to get an editor of an item in a group:
var form = $(function () {
$("#formContainer").dxForm({
formData: {
firstName: "John",
lastName: "Heart",
phone: "+1(213) 555-9392",
email: "jheart@dx-email.com"
},
items: ["firstName", "lastName", {
itemType: "group",
caption: "Contacts",
items: ["phone", "email"]
}]
}).dxForm("instance");
$("#buttonContainer").dxButton({
text: "Customize Phone Editor",
onClick: function (e) {
var editor = form.getEditor("phone");
// Customizations go here
}
});
});See Also
getInstance(element)
getInstance is a static method that the UI component class supports. The following code demonstrates how to get the Form instance found in an element with the myForm ID:
// Modular approach
import Form from "devextreme/ui/form";
...
let element = document.getElementById("myForm");
let instance = Form.getInstance(element) as Form;
// Non-modular approach
let element = document.getElementById("myForm");
let instance = DevExpress.ui.dxForm.getInstance(element);See Also
itemOption(id, options)
When you modify an item, the Form also refreshes all other items in its group. If an item is not in a group, the whole Form is refreshed. To update only your chosen items, wrap them into a separate group.
See Also
itemOption(id, option, value)
jQuery
The following code shows how to call this method for an item organized in a group.
$(function () {
const form = $("#formContainer").dxForm({
formData: {
firstName: "John",
lastName: "Heart",
phone: "+1(213) 555-9392",
email: "jheart@dx-email.com"
},
items: ["firstName", "lastName", {
itemType: "group",
caption: "Contacts",
name: "groupName",
items: ["phone", "email"]
}]
}).dxForm("instance");
// ...
form.itemOption("groupName.phone", "visible", false);
// ==== or ====
form.itemOption("Contacts.phone", "visible", false);
});When you modify an item, the Form also refreshes all other items in its group. If an item is not in a group, the whole Form is refreshed. To update only your chosen items, wrap them into a separate group.
See Also
on(eventName, eventHandler)
Use this method to subscribe to one of the events listed in the Events section.
See Also
on(events)
Use this method to subscribe to several events with one method call. Available events are listed in the Events section.
See Also
registerKeyHandler(key, handler)
A handler. Accepts the keydown event as the argument. It is a EventObject or a jQuery.Event when you use jQuery.
The key argument accepts one of the following values:
- "backspace"
- "tab"
- "enter"
- "escape"
- "pageUp"
- "pageDown"
- "end"
- "home"
- "leftArrow"
- "upArrow"
- "rightArrow"
- "downArrow"
- "del"
- "space"
- "F"
- "A"
- "asterisk"
- "minus"
A custom handler for a key cancels the default handler for this key.
See Also
repaint()
Renders the component again without reloading data. Use the method to update the component's markup and appearance dynamically.
The repaint() method re-initializes the component with new settings, resetting its state and history.
See Also
- reload() in DataSource | List
- refresh() in DataGrid | TreeList
reset(editorsData)
Resets editor values. Every editor attempts to obtain its new value from the argument list. If an editor is not included in the list, that editor resets to its initial value.
This method sets the isDirty flag to false. You can use this method without arguments to reset the Form component to initial values.
jQuery
$(() => {
const form = $('#form').dxForm({
// ...
items: [
// ...
{
itemType: 'button',
buttonOptions: {
// ...
onClick: () => {
form.reset({'name': 'John Smith', 'email': 'johnsmith@example.com'});
},
}
}
]
}).dxForm('instance');
});Angular
import { Component, ViewChild } from '@angular/core';
import { DxFormComponent } from 'devextreme-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('formRef', { static: false }) form: DxFormComponent;
resetButtonOptions = {
// ...
onClick: () => {
this.form.instance.reset({'name': 'John Smith', 'email': 'johnsmith@example.com'});
},
};
}
<dx-form ...
#formRef
>
<dxi-item
itemType="button"
[buttonOptions]="resetButtonOptions"
>
</dxi-item>
</dx-form>Vue
<template>
<DxForm ...
:ref="formRef"
>
<DxButtonItem ...
:button-options="resetButtonOptions"
/>
</DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxForm, { DxButtonItem }from 'devextreme-vue/form';
export default {
components: {
DxForm,
DxButtonItem
},
data() {
return {
formRef,
resetButtonOptions: {
// ...
onClick: () => {
this.form.reset({'name': 'John Smith', 'email': 'johnsmith@example.com'});
},
}
}
},
computed: {
form: function() {
return this.$refs[formRef].instance;
}
}
}
</script>React
import React, { useRef } from 'react';
import Form, { ButtonItem } from 'devextreme-react/form';
import 'devextreme/dist/css/dx.light.css';
const App = () => {
const formRef = useRef(null);
const resetButtonOptions = {
// ...
onClick: () => {
this.formRef.current.instance.reset({'name': 'John Smith', 'email': 'johnsmith@example.com'});
},
};
return (
<Form ...
ref={formRef}
>
<ButtonItem ...
buttonOptions={resetButtonOptions}
/>
</Form>
);
};
export default App;See Also
updateData(data)
Merges the passed data object with formData. Matching properties in formData are overwritten and new properties added.
This method does not replace the formData object. To replace it, use the option(optionName, optionValue) method as shown below:
formInstance.option("formData", newFormData);See Also
updateDimensions()
A Promise that is resolved after the update is completed. It is a native Promise or a jQuery.Promise when you use jQuery.
Use this method to fit the UI component contents to the UI component size after it (size) has been changed.
See Also
validate()
Validates the values of all editors on the form against the list of the validation rules specified for each form item.
If you have technical questions, please create a support ticket in the DevExpress Support Center.