Custom errors

- Possibility to use scoped-slot to customise fully how errors are build
- Expose `errors` object, `field` object and `getValueFromOption` function

Author: Lionel Bijaoui

dev/projects/full/app.vue

@@ -23,20 +23,34 @@
 					</div>
 				</div>
 				<vue-form-generator :schema="schema" :model="model" :options="formOptions" :multiple="selected.length > 1" ref="form" :is-new-model="isNewModel" @model-updated="modelUpdated" @validated="onValidated">
+
 					<template slot="label" slot-scope="{ field }">
 						<h1>Custom label : {{ field.label }}</h1>
 					</template>
+
 					<template slot="help" slot-scope="{ field }">
 						<span v-if='field.help' class="help">
 							<span @click.prevent="testClick(field.help, $event)">Custom help</span>
 							<i class="icon"></i>
 							<!-- <div class="helpText-" v-html='field.help'></div> -->
 						</span>
 					</template>
+
 					<template slot="hint" slot-scope="{ field, getValueFromOption }">
 						<span>Custom hint</span>
 						<div class="hint" v-html="getValueFromOption(field, 'hint', undefined)"></div>
 					</template>
+
+					<template slot="errors" slot-scope="{ errors, field, getValueFromOption }">
+						<table class="errors help-block">
+							<tbody>
+								<tr>
+									<td v-for="(error, index) in errors" :key="index" v-html="error"></td>
+								</tr>
+							</tbody>
+						</table>
+					</template>
+
 				</vue-form-generator>
 			</div>
 			<div class="col-md-6">

src/formElement.vue

@@ -16,9 +16,9 @@
 			<slot name="hint" :field="field" :getValueFromOption="getValueFromOption"></slot>
 		</template>
 
-		<div v-if="childErrors.length > 0" class="errors help-block">
-			<span v-for="(error, index) in childErrors" :key="index" v-html="error"></span>
-		</div>
+		<template v-if="fieldHasErrors">
+			<slot name="errors" :childErrors="childErrors" :field="field" :getValueFromOption="getValueFromOption" ></slot>
+		</template>
 	</div>
 </template>
 <script>
@@ -87,11 +87,13 @@ export default {
 		fieldHasHint() {
 			return !isNil(this.field.hint);
 		},
+		fieldHasErrors() {
+			return this.childErrors.length > 0;
+		},
 		fieldRowClasses() {
-			const hasErrors = this.childErrors.length > 0;
 			let baseClasses = {
-				[objGet(this.options, "validationErrorClass", "error")]: hasErrors,
-				[objGet(this.options, "validationSuccessClass", "valid")]: !hasErrors,
+				[objGet(this.options, "validationErrorClass", "error")]: this.fieldHasErrors,
+				[objGet(this.options, "validationSuccessClass", "valid")]: !this.fieldHasErrors,
 				disabled: this.getValueFromOption(this.field, "disabled"),
 				readonly: this.getValueFromOption(this.field, "readonly"),
 				featured: this.getValueFromOption(this.field, "featured"),

src/formGenerator.vue

@@ -5,11 +5,13 @@
 		<form-group :tag="tag" :fields="fields" :model="model" :options="options" :errors="errors" :eventBus="eventBus">
 			<template slot="element" slot-scope="slotProps">
 				<form-element :field="slotProps.field" :model="slotProps.model" :options="slotProps.options" :errors="slotProps.errors" :eventBus="eventBus">
+
 					<template slot="label" slot-scope="{ field, getValueFromOption }">
 						<slot name="label" :field="field" :getValueFromOption="getValueFromOption">
 							<span v-html="field.label"></span>
 						</slot>
 					</template>
+
 					<template slot="help" slot-scope="{ field, getValueFromOption }">
 						<slot name="help" :field="field" :getValueFromOption="getValueFromOption">
 							<span v-if='field.help' class="help">
@@ -18,11 +20,21 @@
 							</span>
 						</slot>
 					</template>
+
 					<template slot="hint" slot-scope="{ field, getValueFromOption }">
 						<slot name="hint" :field="field" :getValueFromOption="getValueFromOption">
 							<div class="hint" v-html="getValueFromOption(field, 'hint', undefined)"></div>
 						</slot>
 					</template>
+
+					<template slot="errors" slot-scope="{ childErrors, field, getValueFromOption }">
+						<slot name="errors" :errors="childErrors" :field="field" :getValueFromOption="getValueFromOption">
+							<div class="errors help-block">
+								<span v-for="(error, index) in childErrors" :key="index" v-html="error"></span>
+							</div>
+						</slot>
+					</template>
+
 				</form-element>
 			</template>
 		</form-group>