@baloise/web-app-form-vue
v3.11.4
Published
Utilities for Baloise Web Applications
Downloads
47
Maintainers
Keywords
Readme
@baloise/web-form-vue
Delivers utility components to create forms that follow the guides of the Baloise Design System. Moreover it extends the useField function to work as smooth as possible with the Baloise Design System and defines Baloise specific yup schema validations.
Installation
For Vue we use the library VeeValidate together with the Yup Schema Validation.
npm install @baloise/web-app-form-vue vee-validate@next yup
import { baloiseForm } from '@baloise/web-app-form-vue'
import App from './App.vue'
createApp(App).use(baloiseForm).mount('#app')
Define Form Field
Instead of using the useField
from Vee-Validate use the wrapper useBalField
.
This extends the Vee-Validate implementation with the property invalid and
message from the yup schema validations.
<script setup lang="ts">
import { BalInput, BalField, BalFieldLabel, BalFieldControl, BalFieldMessage } from '@baloise/design-system-components-vue'
import { useBalField } from '@baloise/web-app-form-vue'
const { value, message, invalid } = useBalField<string>('firstname')
</script>
<template>
<BalField :invalid="invalid">
<BalFieldLabel>My Label</BalFieldLabel>
<BalFieldControl>
<BalInput v-model="value" />
</BalFieldControl>
<BalFieldMessage>{{ message }}</BalFieldMessage>
</BalFie>
</template>