RetailCRM-Mirror/vue-formulario
1
0
Fork 0
mirror of synced 2024-11-25 14:56:03 +03:00
Code Issues Projects Releases Wiki Activity

docs: Fixed README.md

Browse Source
This commit is contained in:
Zaytsev Kirill 2020-11-10 10:24:31 +03:00
parent 076e140452
commit 13390b59c4
1 changed files with 67 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
README.md
View File

@ -1,86 +1,90 @@
## What is Vue Formulario? ## What is Vue Formulario?
Vue Formulario is a library, based on <a href="https://vueformulate.com">Vue Formulate</a>, that handles the core logic for working with forms and gives full control on the form presentation. Vue Formulario is a library, based on <a href="https://vueformulate.com">Vue Formulate</a>, that handles the core logic
for working with forms and gives full control on the form presentation.
## Examples ## Examples
Every form control have to rendered inside FormularioInput component. This component provides `id` and `context` in v-slot props. Control should use `context.model` as v-model and `context.blurHandler` as handler for `blur` event (it is necessary for validation when property `errorBehavior` is `blur`). Errors object list for field can be accessed through `context.allErrors`. Each error is an object with fields message (translated message), rule (rule name) and context. Every form control have to rendered inside FormularioInput component. This component provides `id` and `context` in
v-slot props. Control should use `context.model` as v-model and `context.runValidation` as handler for `blur` event
(it is necessary for validation when property `validationBehavior` is `demand`). Errors list for a field can be
accessed through `context.allErrors`.
The example below creates the authorization form from data: The example below creates the authorization form from data:
```json ```json
{ {
"username": "", "username": "",
"password": "", "password": "",
"options": { "options": {
"anonym": false, "anonymous": false,
"tags": ["test"] "tags": ["test"]
},
} }
}
``` ```
```html ```html
<FormularioForm <FormularioForm
v-model="formData" v-model="formData"
name="formName" name="formName"
>
<FormularioInput
v-slot="{ context }"
name="username"
validation="required|email"
validation-behavior="live"
> >
<FormularioInput <input
v-slot="vSlot" v-model="context.model"
name="username" type="text"
validation="required|email" @blur="context.runValidation"
error-behavior="live"
> >
<input <div v-if="context.allErrors.length > 0">
v-model="vSlot.context.model" <span
type="text" v-for="(error, index) in context.allErrors"
@blur="vSlot.context.blurHandler" :key="index"
> >
<div v-if="vSlot.context.showValidationErrors"> {{ error }}
<span </span>
v-for="(error, index) in vSlot.context.allErrors" </div>
:key="index" </FormularioInput>
<FormularioInput
v-slot="{ context }"
name="password"
validation="required|min:4,length"
>
<input
v-model="context.model"
type="password"
>
</FormularioInput>
<FormularioGrouping name="options">
<FormularioInput
v-slot="{ context }"
name="anonymous"
>
<div>
<input
id="options-anonymous"
v-model="context.model"
type="checkbox"
> >
{{ error.message }} <label for="options-anonymous">As anonymous</label>
</span>
</div> </div>
</FormularioInput> </FormularioInput>
</FormularioGrouping>
<FormularioInput <FormularioInput
v-slot="vSlot" v-slot="{ context }"
name="password" name="options.tags[0]"
validation="required|min:4,length" >
<input
v-model="context.model"
type="text"
> >
<input </FormularioInput>
v-model="vSlot.context.model" </FormularioForm>
type="password"
>
</FormularioInput>
<FormularioGrouping name="options">
<FormularioInput
v-slot="vSlot"
name="anonym"
>
<div>
<input
:id="vSlot.id"
v-model="vSlot.context.model"
type="checkbox"
>
<label :for="vSlot.id">As anonym</label>
</div>
</FormularioInput>
</FormularioGrouping>
<FormularioInput
v-slot="vSlot"
name="options.tags[0]"
>
<input
v-model="vSlot.context.model"
type="text"
>
</FormularioInput>
</FormularioForm>
``` ```
## License ## License