:clipboard: A schema-based form generator component for Vue.js
null
, formatValueToField checks for isNil(value)
and returns `n (5b42807), closes #340
formatValueToModel
(a46fe31), closes #341
formatValueToModel
(d1a8bcf), closes #361
integer
validator now calls number
validator, and returns `invalidIntegerl: "The va (8d436be), closes #362
schema.required
for "none selected" disabled state, per @icebob (f562d7f)validateDebounceTime
formOption to fix #309 (20bbd59), closes #309
Number
(8d891d2)name
in checklist input fields with slugify. Fix #243 (a60c0db), closes #243
Now every field has an id
property which is the id of input
.If not set, will be auto-generated from the slugified version of either: schema.inputName
, schema.label
or schema.model
, in that order. If the fieldIdPrefix
option is set, it's value will be prepended to both manual & auto-generated ids.
This PR add two new features to vfg by @dflock & @jmverges.
schema: {
groups:[{
legend: "Contact Details",
fields: [
{
type: "input",
inputType: "text",
label: "Name",
model: "name"
},
{
type: "input",
inputType: "email",
label: "Email",
model: "email"
}
]
},{
legend: "Other Details",
fields: [
{
type: "input",
inputType: "text",
label: "More",
model: "others.more"
},
{
type: "input",
inputType: "text",
label: "Things",
model: "others.things"
}
]
}],
fields: [
{
type: "input",
inputType: "text",
label: "Single field (without group)",
model: "single"
}
]
}
Dev example: http://localhost:8080/grouping/
This would allow styleClasses:'col-xs-6'
for example if you want to have multiple fields in one row.
Usage:
formOptions: {
validationErrorClass: "has-error",
validationSuccessClass: "has-success"
}
I have a first solution to make it a little more flexible with the is
attribute.
// vfg.vue
<template>
<div :is="tag">VFG</div>
</template>
<script>
export default {
props: {
tag: {
type: String,
default: 'fieldset'
}
}
};
</script>
basic usage
<vfg></vfg>
config usage
<vfg tag="section"></vfg>
basic usage rendered
<fieldset>VFG</fieldset>
config usage rendered
<section>VFG</section>
options
to formOptions
because conflicted with vueMultiSelect property (2f29943)let customAsyncValidator = function(value) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (value)
resolve();
else
resolve([ "Invalid value from async validator" ]);
}, 1000);
});
};
Schema:
{
type: "input",
inputType: "url",
label: "URL",
model: "website",
validator: customAsyncValidator
}
You can add custom validator messages for fields in schema.
Every validator function has a method locale
. Parameter is an object of custom messages.
Example:
let schema = {
fields: [
{
type: "input",
inputType: "password",
label: "Password",
model: "password",
min: 6,
required: true,
// String validator with custom error messages
validator: validators.string.locale({
fieldIsRequired: "The password is required!",
textTooSmall: "Password must be at least {1} characters"
})
}
]
}
Result:
You can set validator as string instead of Function.
{
type: "input",
inputType: "text",
label: "Name",
model: "name",
min: 3,
validator: "string"
}
This is a shorthand for VueFormGenerator.validators.string
. It can be an Array of Strings too.
checklist
by lionel-bijaoui #156checklist
field now support array of string or array of objects (with name
and value
propertie (be09146)radios
field now support array of string or array of objects (with name
and value
properties) (0f48c30).locale
method to every validator (1dc7fb7)is-checked
class to element where the input is checked to ease customisation. Add checklist (3facc08)input
event to change
on checlist field (e6a2b9a)onChange
trigger event from change
to input
for checklist
(67a3659)checklist
(c66b0e9)checklist
(24eb17f)radios
(8a94e81)this.$set
instead of a direct assignation (4b7e118)If you are using text
, number
, color
, email
, password
or range
field type in schema, please change it to input
and set the type into inputType
property. Example:
Old way
{
type: "text"
},
{
type: "number"
}
New way
{
type: "input"
inputType: "text"
},
{
type: "input"
inputType: "number"
}
full
and core
#121Core is a more minimal version with only half the fields. Full is core + other fields.
If you don't know what to choose, don't worry, the full is the default version.
If you want the slim down version, here is the changes:
// the "core" way
<script>
import VueFormGenerator from "vue-form-generator/dist/vfg-core.js";
import "vue-form-generator/dist/vfg-core.css";
</script>
validated
event, if validation executed. Event parameters: isValid: boolean, errors: Array
Example:
<vue-form-generator @validated="onValidated" />
...
methods:{
onValidated(isValid, errors) {
console.log("Validation result: ", isValid, ", Errors:", errors);
}
}
schema.errors
issue is fixed. Now errors
in the local data. The communication with parent is event-based (similar @validated
solution)this
in schema functions. Now this
is always the instance of vfg. Parameters: model, fieldSchema, vfg