Input #

The main forms are the data entry field. At this time will be considered in detail how <InputField/> works and how to implement your own input yourself.

Initialization #

To bind to a form, the usual useInputState method call is used:

import {useInputState} from "jenesius-vue-form"
const name = "username" // Or any input name
const {state, input} = useInputState(name)

That's all, this function will connect the input mole with the form model. You just need to connect it with your view and that's it.

Let's create a simple analogue for the "text" field.

<!-- new-input.vue -->
<template>
    <input
        type = "text"
        :value = "state.value"
        @input = "input.change($event.target.value)"
        :disabled = "state.disabled"
    />
</template>
<script setup>
    import {useInputState} from "jenesius-vue-form"
    const props = defineProps();
    const {state, input} = useInputState(props.name)
</script>

As you can see from the example, state is a reactive object and stores the following data:

• value Any value that is stored in the form's data model.
• disabled Boolean variable indicating whether the field is disabled.
• errors Array of test errors after validation passed. On the other hand, input provides functionality for working with the data model:
• change Changes field values.
• validate Checks the field for validity. Returns an array of text errors. In case when the field is valid - will return an empty array.

After creating this input, you can safely use it with the form:

<new-input name = "login" />
    
<script setup>
    const form = new Form();
</script>

In the current example, the field will be associated with and managed by the form's data model.

Reusing an InputField #

This method gives you complete control over the situation, however, when developing your own fields partially rely on neither <InputField/>.

Creating more different input fields will create confusion in your code. For this extension mechanism of standard input fields was implemented.

Let's go back to our new-input.vue and rewrite it for better usability:

<!-- new-input.vue -->
<template>
    <input
        type = "text"
        :value = "modelValue"
        @input = "$emit('update:modelValue', $event.target.value)"
        :disabled = "disabled"
        :class = "{ 'input-text_error': errors.length !== 0 }"
    />
</template>
<script >
    export default {
        props: {
            errors: [],
            modelValue: '',
            disabled: Boolean
        }
    }
</script>

In this case, we do not use hooks and additional functions. It will do everything for us InputField. It may seem that this example does not give us the opportunity to set our own values, because it will be hidden behind the parent input. This is not true:

All props passed to the InputField will also be passed to your component.

Now it remains to add it to the configuration:

import {config} from "jenesius-vue-form";
import NewInput from "./new-input.vue";
config({
    inputTypes: {
        new: NewInput, // New Input
    }
})

And feel free to use it in your code:

<template>
    <input-field type = "new"/>
</template>