79 lines
2.0 KiB
Vue
79 lines
2.0 KiB
Vue
<template>
|
|
<FormularioForm v-model="values">
|
|
<FormularioInput
|
|
v-slot="{ context }"
|
|
:validation-messages="{
|
|
number: 'The value is not a number',
|
|
required: 'Value required',
|
|
}"
|
|
class="mb-3"
|
|
name="number"
|
|
validation="required"
|
|
>
|
|
<label for="text-field">Text field (required)</label>
|
|
<input
|
|
id="text-field"
|
|
v-model="context.model"
|
|
type="text"
|
|
class="form-control"
|
|
style="max-width: 250px;"
|
|
@blur="context.runValidation()"
|
|
>
|
|
|
|
<div
|
|
v-for="(error, index) in context.allErrors"
|
|
:key="index"
|
|
class="text-danger"
|
|
>
|
|
{{ error }}
|
|
</div>
|
|
</FormularioInput>
|
|
|
|
<FormularioInput
|
|
v-slot="{ context }"
|
|
:validation-messages="{ in: 'The value is not in range (abc,def)' }"
|
|
class="mb-3"
|
|
name="abcdef-field"
|
|
validation="in:abc,def"
|
|
>
|
|
<label for="abcdef-field">Text field (in:abc,def)</label>
|
|
<input
|
|
id="abcdef-field"
|
|
v-model="context.model"
|
|
type="text"
|
|
class="form-control"
|
|
style="max-width: 250px;"
|
|
@blur="context.runValidation()"
|
|
>
|
|
|
|
<div
|
|
v-for="(error, index) in context.allErrors"
|
|
:key="index"
|
|
class="text-danger"
|
|
>
|
|
{{ error }}
|
|
</div>
|
|
</FormularioInput>
|
|
|
|
<div>{{ values }}</div>
|
|
</FormularioForm>
|
|
</template>
|
|
|
|
<script>
|
|
import FormularioForm from '@/FormularioForm'
|
|
import FormularioInput from '@/FormularioInput'
|
|
|
|
export default {
|
|
name: 'FormularioInputTale',
|
|
|
|
components: {
|
|
FormularioForm,
|
|
FormularioInput,
|
|
},
|
|
|
|
data: () => ({
|
|
values: {},
|
|
}),
|
|
}
|
|
</script>
|