Skip to content

Configuration

Working with the library configuration is used through the config function:

ts
import {config} from "jenesius-vue-form"
config(params)
import {config} from "jenesius-vue-form"
config(params)

The Params object has the following type:

ts
interface IConfigurationParams {
    inputTypes: {
        [name: string]: any
    },
    requiredMessage:string
    typeNotCaseSensitive: boolean
    debug: boolean
    defaultType: string
}
interface IConfigurationParams {
    inputTypes: {
        [name: string]: any
    },
    requiredMessage:string
    typeNotCaseSensitive: boolean
    debug: boolean
    defaultType: string
}

inputType Optional

An object to overwrite or define new fields.

To add new or override type used in FormField you need to specify type name and Vue component:

ts
import NewInputAddress from "./address.vue"
import NewInputText from "./text.vue"
config({
   inputTypes: {
     address: NewInputAddress, // New field
     text : NewInputText // Overridden field
   }
})
import NewInputAddress from "./address.vue"
import NewInputText from "./text.vue"
config({
   inputTypes: {
     address: NewInputAddress, // New field
     text : NewInputText // Overridden field
   }
})

In this example, we specified a new address field and overridden the existing text type:

html
<!--Will generate NewInputAddress-->
<input-field type="address" name="some-name-address"/>

<!--Will generate an overridden component-->
<input-field name="new-text-widget"/>
<!--Will generate NewInputAddress-->
<input-field type="address" name="some-name-address"/>

<!--Will generate an overridden component-->
<input-field name="new-text-widget"/>

requiredMessage Optional

When the required parameter is set for a field, the message displayed if the field is not filled in during validation will be Please fill in this field. Set a new value for the given field to override it:

ts
config({
   requiredMessage: "This field must be filled."
})
config({
   requiredMessage: "This field must be filled."
})

typeNotCaseSensitive Optional

By default, the field type is not case sensitive. The typeNotCaseSensitive property is set to true. In this case the following entry will display three identical input fields:

html
<input-field name="a"type="test"/>
<input-field name="a" type="Test"/>
<input-field name="a" type="TEST"/>
<input-field name="a"type="test"/>
<input-field name="a" type="Test"/>
<input-field name="a" type="TEST"/>

If this behavior is not suitable for your project, you should set the above parameter to false:

ts
config({
typeNotCaseSensitive: false
})
config({
typeNotCaseSensitive: false
})

debug Optional

To better see what's going on with the form, you can enable the debug option, after which additional output will be displayed in the console information while the form is running:

ts
config({
debug: true
})
config({
debug: true
})

defaultType Optional

The default is text. Stores the name of the type to be used if type is not given in FormField.

Released under the MIT License.