Vue Form - Additional Marks

Simple items may require a value or may allow a user to skip it. Both types of items can be marked with a symbol or text. Required items are those whose isRequired property is true, others are considered optional.

To specify the mark or text for required and optional items, use the requiredMark and optionalMark properties. Note that the "optional" mark will not be displayed until you set the showOptionalMark property to true. You can also hide the "required" mark using the showRequiredMark property.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            position: "CEO"
        },
        items: [
            { dataField: "firstName", isRequired: true },
            { dataField: "lastName", isRequired: true },
            "position"
        ],
        requiredMark: "!",
        optionalMark: "opt",
        showOptionalMark: true
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    requiredMark="!"
    optionalMark="opt"
    [showOptionalMark]="true">
    <dxi-item dataField="firstName" [isRequired]="true"></dxi-item>
    <dxi-item dataField="lastName"  [isRequired]="true"></dxi-item>
    <dxi-item dataField="position"></dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        position: "CEO"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxForm
        :form-data='employee'
        required-mark="!"
        optional-mark="opt"
        :show-optional-mark="true">
        <DxSimpleItem data-field="firstName" :is-required="true" />
        <DxSimpleItem data-field="lastName"  :is-required="true" />
        <DxSimpleItem data-field="position" />
    </DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    position: 'CEO'
};

export default {
    components: {
        DxForm, DxSimpleItem
    },
    data() {
        return {
            employee
        };
    },
};
</script>
React
App.js
import React from 'react';

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

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

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    position: 'CEO'
};

class App extends React.Component {
    render() {
        return (
            <Form
                formData={employee}
                requiredMark="!"
                optionalMark="opt"
                showOptionalMark={true}>
                <SimpleItem dataField="firstName" isRequired={true} />
                <SimpleItem dataField="lastName"  isRequired={true} />
                <SimpleItem dataField="position" />
            </Form>
        );
    }
}

export default App;

Each label ends with a colon. To hide it, assign false to the showColonAfterLabel property. Note that you can show/hide a colon for an individual item using the label.showColon property.

jQuery
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            position: "CEO"
        },
        showColonAfterLabel: false,
        items: ["firstName", "lastName", {
            dataField: "position",
            label: { showColon: true }
        }]
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    [showColonAfterLabel]="false">
    <dxi-item dataField="firstName"></dxi-item>
    <dxi-item dataField="lastName"></dxi-item>
    <dxi-item dataField="position">
        <dxo-label [showColon]="true"></dxo-label>
    </dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        position: "CEO"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxForm
        :form-data="employee"
        :show-colon-after-label="false">
        <DxSimpleItem data-field="firstName" />
        <DxSimpleItem data-field="lastName" />
        <DxSimpleItem data-field="position">
            <DxLabel :show-colon="true" />
        </DxSimpleItem>
    </DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    position: 'CEO'
};

export default {
    components: {
        DxForm, DxSimpleItem, DxLabel
    },
    data() {
        return {
            employee
        };
    },
};
</script>
React
App.js
import React from 'react';

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

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

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    position: 'CEO'
};

class App extends React.Component {
    render() {
        return (
            <Form
                formData={employee}
                showColonAfterLabel={false}>
                <SimpleItem dataField="firstName" />
                <SimpleItem dataField="lastName" />
                <SimpleItem dataField="position">
                    <Label showColon={true} />
                </SimpleItem>
            </Form>
        );
    }
}

export default App;
See Also