Form
The UiForm component renders a <form> DOM element and allows you to easily validate child form components (like XField wrapped components) that have the internal validation (NOT the external one) through rules associated with them.
Basic
Typings
typescript
interface UiFormProps {
modelValue: Indexable;
stacked?: boolean;
loading?: boolean;
errors?: Indexable<string>;
type?: FormType;
required: string[];
watchFields?: string[];
sections: FieldSection[];
actions?: FormAction[];
addNewLabel?: string;
removeLabel?: string;
}Basic Implementation
vue
<template>
<ui-form
v-bind="schema"
v-model="initialValues"
@on:submit="handleSubmit"
/>
</template>
<script setup lang="ts">
import { UiForm } from 'portabilis-ui';
import type { FormProps } from '@/components/form/types';
import { ref } from 'vue';
interface FormValues {
first_name: string;
last_name: string;
accept: boolean;
};
const schema = ref<FormProps>({
type: 'object',
required: [
'accept'
],
stacked: false,
sections: [
{
heading: {
title: 'Personal Info',
subtitle: 'This is a simple form example',
},
properties: {
first_name: {
type: 'TEXT',
variant: 'DEFAULT',
title: 'First Name',
clearable: true,
},
last_name: {
type: 'TEXT',
variant: 'DEFAULT',
title: 'Last Name',
clearable: true,
},
accept: {
type: 'CHECKBOX',
variant: 'DEFAULT',
title: 'I accept the terms and conditions',
description: 'If you do not accept the terms and conditions, you will not be able to submit the form.',
}
}
}
]
});
const initialValues = ref<FormValues>({
name: '',
lastname: '',
acceptin: false
});
const handleSubmit = (values) => {
alert(JSON.stringify(values, null, 2));
};
</script>