Update forms doc
Cagatay Civici
parent
8dc4b74d35
commit
e8f3a62077
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>PrimeCLT is available for download on <a href="https://www.npmjs.com/package/primeclt">npm Registry</a>.</p>
|
||||
<p>PrimeCLT is available for download on <a href="https://www.npmjs.com/package/primeclt">npm registry</a>.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,43 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Form is compatible with PrimeVue components, enabling smooth integration and functionality. Each component is linked to Form via a <i>name</i> property, which the form uses to create a state object for tracking values, errors and actions.
|
||||
All PrimeVue form components are designed for seamless integration with the forms library. Instead of using the standard <i>v-model</i>, the <i>name</i> property is used to link a state object that tracks values, errors, and actions. The
|
||||
form component provides four key properties for state management.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-1/4">Property</th>
|
||||
<th class="w-3/4">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>v-slot="$form"</td>
|
||||
<td>Exposes the main <i>$form</i> object that tracks the state management of the fields.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>initialValues</td>
|
||||
<td>Specifies the default values to initiate the form with.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>resolver</td>
|
||||
<td>The validation handler to implement validations or to bind a schema like <i>Zod</i>, <i>Yup</i>, <i>Valibot</i> and more.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>@submit</td>
|
||||
<td>The event handler to execute when the form is submitted.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
|
||||
<Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -26,9 +55,9 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
|
||||
<Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -39,9 +68,9 @@ export default {
|
|||
<Toast />
|
||||
|
||||
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
|
||||
<Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -84,9 +113,9 @@ export default {
|
|||
<Toast />
|
||||
|
||||
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
|
||||
<Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Forms add-on is available for download on npm registry.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
# Using npm
|
||||
npm install @primevue/forms
|
||||
|
||||
# Using yarn
|
||||
yarn add @primevue/forms
|
||||
|
||||
# Using pnpm
|
||||
pnpm add @primevue/forms
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>This section demonstrates how to create a dynamic form using a custom Form component. It showcases an example where form fields are generated dynamically based on the provided configuration, allowing for flexible form structures.</p>
|
||||
<p>
|
||||
This section demonstrates how to create a dynamic form using a custom Form component. It showcases an example where form fields are generated dynamically based on the provided configuration, allowing for flexible form structures. The
|
||||
components named <i>Dynamic*</i> shown in this example are not built-in, and only available for sampling purposes. First form uses a declarative approach whereas second form goes for a programmatic approach. We suggest running this sample
|
||||
in StackBlitz to view the comprehensive implementation.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<div class="card grid md:grid-cols-2 gap-4 w-full">
|
||||
<Fieldset legend="Form 1" pt:content:class="flex justify-center">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>The form component is responsible for managing the form state and must encapsulate the form fields.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
|
|
@ -9,7 +11,7 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
import Form from '@primevue/form';
|
||||
import Form from '@primevue/forms';
|
||||
`
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,40 +1,42 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
It can be integrated with with schema libraries such as <a href="https://zod.dev/">Zod</a>, <a href="https://github.com/jquense/yup">Yup</a>, <a href="https://joi.dev/">Joi</a>, <a href="https://valibot.dev/">Valibot</a>,
|
||||
<a href="https://docs.superstructjs.org/">Superstruct</a> or custom validation logic is possible using <i>resolver</i> property, with available resolvers from <i>@primevue/form/resolvers</i> for each schema.
|
||||
Validations are implemented the with <i>resolver</i> property. A custom resolver is responsible for handling the validation and returning an <i>errors</i> object with key-value pairs where key is the form field name and value is an array
|
||||
of error object data. For productivity, we recommend using a schema validation library instead of building your own custom validation logic. The forms library provide built-in resolvers for popular options including
|
||||
<a href="https://zod.dev/">Zod</a>, <a href="https://github.com/jquense/yup">Yup</a>, <a href="https://joi.dev/">Joi</a>, <a href="https://valibot.dev/">Valibot</a>, and <a href="https://docs.superstructjs.org/">Superstruct</a> that can
|
||||
be be imported from <i>@primevue/form/resolvers</i> path.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-col items-center gap-5">
|
||||
<Fieldset legend="Schema">
|
||||
<RadioButtonGroup v-model="selectedSchema" name="schema" class="flex flex-wrap gap-4" @update:modelValue="changeResolver">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="zod" value="Zod" />
|
||||
<label for="zod" class="ml-2">Zod</label>
|
||||
<label for="zod">Zod</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="yup" value="Yup" />
|
||||
<label for="yup" class="ml-2">Yup</label>
|
||||
<label for="yup">Yup</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="valibot" value="Valibot" />
|
||||
<label for="valibot" class="ml-2">Valibot</label>
|
||||
<label for="valibot">Valibot</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="superStruct" value="SuperStruct" />
|
||||
<label for="superStruct" class="ml-2">SuperStruct</label>
|
||||
<label for="superStruct">SuperStruct</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="custom" value="Custom" />
|
||||
<label for="custom" class="ml-2">Custom</label>
|
||||
<label for="custom">Custom</label>
|
||||
</div>
|
||||
</RadioButtonGroup>
|
||||
</Fieldset>
|
||||
|
||||
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Form v-slot="$form" :initialValues :resolver="resolver" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
|
||||
<Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -63,10 +65,10 @@ export default {
|
|||
),
|
||||
code: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Form v-slot="$form" :initialValues :resolver="resolver" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
|
||||
<Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -78,33 +80,33 @@ export default {
|
|||
|
||||
<Fieldset legend="Schema">
|
||||
<RadioButtonGroup v-model="selectedSchema" name="schema" class="flex flex-wrap gap-4" @update:modelValue="changeResolver">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="zod" value="Zod" />
|
||||
<label for="zod" class="ml-2">Zod</label>
|
||||
<label for="zod">Zod</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="yup" value="Yup" />
|
||||
<label for="yup" class="ml-2">Yup</label>
|
||||
<label for="yup">Yup</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="valibot" value="Valibot" />
|
||||
<label for="valibot" class="ml-2">Valibot</label>
|
||||
<label for="valibot">Valibot</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="superStruct" value="SuperStruct" />
|
||||
<label for="superStruct" class="ml-2">SuperStruct</label>
|
||||
<label for="superStruct">SuperStruct</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="custom" value="Custom" />
|
||||
<label for="custom" class="ml-2">Custom</label>
|
||||
<label for="custom">Custom</label>
|
||||
</div>
|
||||
</RadioButtonGroup>
|
||||
</Fieldset>
|
||||
|
||||
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Form v-slot="$form" :initialValues :resolver="resolver" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
|
||||
<Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -188,33 +190,33 @@ export default {
|
|||
|
||||
<Fieldset legend="Schema">
|
||||
<RadioButtonGroup v-model="selectedSchema" name="schema" class="flex flex-wrap gap-4" @update:modelValue="changeResolver">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="zod" value="Zod" />
|
||||
<label for="zod" class="ml-2">Zod</label>
|
||||
<label for="zod">Zod</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="yup" value="Yup" />
|
||||
<label for="yup" class="ml-2">Yup</label>
|
||||
<label for="yup">Yup</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="valibot" value="Valibot" />
|
||||
<label for="valibot" class="ml-2">Valibot</label>
|
||||
<label for="valibot">Valibot</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="superStruct" value="SuperStruct" />
|
||||
<label for="superStruct" class="ml-2">SuperStruct</label>
|
||||
<label for="superStruct">SuperStruct</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="custom" value="Custom" />
|
||||
<label for="custom" class="ml-2">Custom</label>
|
||||
<label for="custom">Custom</label>
|
||||
</div>
|
||||
</RadioButtonGroup>
|
||||
</Fieldset>
|
||||
|
||||
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Form v-slot="$form" :initialValues :resolver="resolver" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
|
||||
<Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Form uses the <i>name</i> property to create a state object for tracking values, errors, and actions.</p>
|
||||
<p>The <i>$form</i> object tracks the state management of the fields. Each field is linked with the <i>name</i> property. View the <i>FormFieldState</i> type in the API documentation for details about each property.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="grid lg:grid-cols-2 gap-4 w-full">
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" />
|
||||
<Button type="submit" severity="secondary" label="Submit" class="w-full sm:w-56" />
|
||||
</div>
|
||||
<Fieldset legend="Form States">
|
||||
<Fieldset legend="Form States" class="h-80 overflow-auto">
|
||||
<pre class="whitespace-pre-wrap">{{ $form }}</pre>
|
||||
</Fieldset>
|
||||
</Form>
|
||||
|
|
@ -30,7 +30,7 @@ export default {
|
|||
<InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" />
|
||||
<Button type="submit" severity="secondary" label="Submit" class="w-full sm:w-56" />
|
||||
</div>
|
||||
<Fieldset legend="Form States">
|
||||
<Fieldset legend="Form States" class="h-80 overflow-auto">
|
||||
<pre class="whitespace-pre-wrap">{{ $form }}</pre>
|
||||
</Fieldset>
|
||||
</Form>
|
||||
|
|
@ -45,7 +45,7 @@ export default {
|
|||
<InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" />
|
||||
<Button type="submit" severity="secondary" label="Submit" class="w-full sm:w-56" />
|
||||
</div>
|
||||
<Fieldset legend="Form States">
|
||||
<Fieldset legend="Form States" class="h-80 overflow-auto">
|
||||
<pre class="whitespace-pre-wrap">{{ $form }}</pre>
|
||||
</Fieldset>
|
||||
</Form>
|
||||
|
|
@ -96,7 +96,7 @@ export default {
|
|||
<InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" />
|
||||
<Button type="submit" severity="secondary" label="Submit" class="w-full sm:w-56" />
|
||||
</div>
|
||||
<Fieldset legend="Form States">
|
||||
<Fieldset legend="Form States" class="h-80 overflow-auto">
|
||||
<pre class="whitespace-pre-wrap">{{ $form }}</pre>
|
||||
</Fieldset>
|
||||
</Form>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,21 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>The <i>submit</i> callback provides an object containing the form's validity, all errors, and current states. This offers access to the form values as well as validation status and any existing errors during submission.</p>
|
||||
<p>
|
||||
The <i>submit</i> callback returns an object that encapsulates the form's validity, any existing errors, and its current state. This enables access to the form values, validation status, and any errors present at the time of submission.
|
||||
View the <i>FormSubmitEvent</i> in the API documentation for more information about the available event data.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-60">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
|
||||
<Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<Password name="password" placeholder="Password" :feedback="false" toggleMask fluid />
|
||||
<Message v-if="$form.password?.invalid" severity="error">
|
||||
<ul class="mx-1 px-3">
|
||||
<li v-for="(error, index) of $form.password.errors" :key="index" class="py-1">{{ error.message }}</li>
|
||||
<Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">
|
||||
<ul class="my-0 px-4 flex flex-col gap-1">
|
||||
<li v-for="(error, index) of $form.password.errors" :key="index">{{ error.message }}</li>
|
||||
</ul>
|
||||
</Message>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,24 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Form component supports flexible validation triggers, allowing validation on value updates, blur events, form mount, or submission, with options to apply this behavior globally or to specific fields via <i>validateOnValueUpdate</i>,
|
||||
<i>validateOnBlur</i>, <i>validateOnMount</i>, and <i>validateOnSubmit</i>, which can also be set in PrimeVue components using <i>formControl</i> property.
|
||||
Form component supports flexible validation triggers, allowing validation on value updates, blur events, form mount, or submission. These behaviors can be configured at form level or on specific fields via the
|
||||
<i>validateOnValueUpdate</i>, <i>validateOnBlur</i>, <i>validateOnMount</i>, and <i>validateOnSubmit</i> options of the <i>formControl</i> property.
|
||||
</p>
|
||||
<p>In this example, form disables <i>validateOnValueUpdate</i> and enables <i>validateOnBlur</i> at form level, and validates <b>firstName</b> on mount. The <i>firstName</i> field, overrides the form level setting locally.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['name']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['firstName']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
|
||||
<Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<InputText name="name" type="text" placeholder="Name" fluid :formControl="{ validateOnValueUpdate: true }" />
|
||||
<Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="firstName" type="text" placeholder="First Name" fluid :formControl="{ validateOnValueUpdate: true }" />
|
||||
<Message v-if="$form.firstName?.invalid" severity="error" size="small" variant="simple">{{ $form.firstName.error.message }}</Message>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<InputText name="surname" type="text" placeholder="Surname" fluid />
|
||||
<Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.error.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="lastName" type="text" placeholder="Last Name" fluid />
|
||||
<Message v-if="$form.lastName?.invalid" severity="error" size="small" variant="simple">{{ $form.lastName.error.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -31,23 +32,23 @@ export default {
|
|||
return {
|
||||
initialValues: {
|
||||
username: '',
|
||||
name: '',
|
||||
surname: ''
|
||||
firstName: '',
|
||||
lastName: ''
|
||||
},
|
||||
code: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['name']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['firstName']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
|
||||
<Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<InputText name="name" type="text" placeholder="Name" fluid :formControl="{ validateOnValueUpdate: true }" />
|
||||
<Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="firstName" type="text" placeholder="First Name" fluid :formControl="{ validateOnValueUpdate: true }" />
|
||||
<Message v-if="$form.firstName?.invalid" severity="error" size="small" variant="simple">{{ $form.firstName.error.message }}</Message>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<InputText name="surname" type="text" placeholder="Surname" fluid />
|
||||
<Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.error.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="lastName" type="text" placeholder="Last Name" fluid />
|
||||
<Message v-if="$form.lastName?.invalid" severity="error" size="small" variant="simple">{{ $form.lastName.error.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -57,18 +58,18 @@ export default {
|
|||
<div class="card flex justify-center">
|
||||
<Toast />
|
||||
|
||||
<Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['name']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['firstName']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
|
||||
<Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<InputText name="name" type="text" placeholder="Name" fluid :formControl="{ validateOnValueUpdate: true }"/>
|
||||
<Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="firstName" type="text" placeholder="First Name" fluid :formControl="{ validateOnValueUpdate: true }" />
|
||||
<Message v-if="$form.firstName?.invalid" severity="error" size="small" variant="simple">{{ $form.firstName.error.message }}</Message>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<InputText name="surname" type="text" placeholder="Surname" fluid />
|
||||
<Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.error.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="lastName" type="text" placeholder="Last Name" fluid />
|
||||
<Message v-if="$form.lastName?.invalid" severity="error" size="small" variant="simple">{{ $form.lastName.error.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -81,8 +82,8 @@ export default {
|
|||
return {
|
||||
initialValues: {
|
||||
username: '',
|
||||
name: '',
|
||||
surname: ''
|
||||
firstName: '',
|
||||
lastName: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
|
|
@ -94,12 +95,12 @@ export default {
|
|||
errors.username = [{ message: 'Username is required.' }];
|
||||
}
|
||||
|
||||
if (!values.name) {
|
||||
errors.name = [{ message: 'Name is required.' }];
|
||||
if (!values.firstName) {
|
||||
errors.firstName = [{ message: 'First name is required.' }];
|
||||
}
|
||||
|
||||
if (!values.surname) {
|
||||
errors.surname = [{ message: 'Surname is required.' }];
|
||||
if (!values.lastName) {
|
||||
errors.lastName = [{ message: 'Last name is required.' }];
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
@ -120,18 +121,18 @@ export default {
|
|||
<div class="card flex justify-center">
|
||||
<Toast />
|
||||
|
||||
<Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['name']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['firstName']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
|
||||
<Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<InputText name="name" type="text" placeholder="Name" fluid :formControl="{ validateOnValueUpdate: true }" />
|
||||
<Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="firstName" type="text" placeholder="First Name" fluid :formControl="{ validateOnValueUpdate: true }" />
|
||||
<Message v-if="$form.firstName?.invalid" severity="error" size="small" variant="simple">{{ $form.firstName.error.message }}</Message>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<InputText name="surname" type="text" placeholder="Surname" fluid />
|
||||
<Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.error.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputText name="lastName" type="text" placeholder="Last Name" fluid />
|
||||
<Message v-if="$form.lastName?.invalid" severity="error" size="small" variant="simple">{{ $form.lastName.error.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -146,8 +147,8 @@ const toast = useToast();
|
|||
|
||||
const initialValues = ref({
|
||||
username: '',
|
||||
name: '',
|
||||
surname: ''
|
||||
firstName: '',
|
||||
lastName: ''
|
||||
});
|
||||
|
||||
const resolver = ({ values }) => {
|
||||
|
|
@ -158,11 +159,11 @@ const resolver = ({ values }) => {
|
|||
}
|
||||
|
||||
if (!values.name) {
|
||||
errors.name = [{ message: 'Name is required.' }];
|
||||
errors.firstName = [{ message: 'First name is required.' }];
|
||||
}
|
||||
|
||||
if (!values.surname) {
|
||||
errors.surname = [{ message: 'Surname is required.' }];
|
||||
errors.lastName = [{ message: 'Last name is required.' }];
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
@ -188,12 +189,12 @@ const onFormSubmit = ({ valid }) => {
|
|||
errors.username = [{ message: 'Username is required.' }];
|
||||
}
|
||||
|
||||
if (!values.name) {
|
||||
errors.name = [{ message: 'Name is required.' }];
|
||||
if (!values.firstName) {
|
||||
errors.firstName = [{ message: 'First name is required.' }];
|
||||
}
|
||||
|
||||
if (!values.surname) {
|
||||
errors.surname = [{ message: 'Surname is required.' }];
|
||||
if (!values.lastName) {
|
||||
errors.lastName = [{ message: 'Last name is required.' }];
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a> along with the official
|
||||
PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm registry</a> along with the official
|
||||
<a href="https://www.npmjs.com/package/@primevue/nuxt-module" target="_blank" rel="noopener noreferrer">@primevue/nuxt-module</a>.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a>.</p>
|
||||
<p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm registry</a>.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<DocComponent title="Vue Form Component" header="Forms" description="Form provides validation functionality and manages form state." :componentDocs="docs" :apiDocs="['Form']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
|
||||
<DocComponent title="Vue Form Library" header="Forms" description="The PrimeVue Forms library provides comprehensive form state management with built-in validation support." :componentDocs="docs" :apiDocs="['Form']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AccessibilityDoc from '@/doc/forms/AccessibilityDoc.vue';
|
||||
import DownloadDoc from '@/doc/forms/DownloadDoc.vue';
|
||||
import BasicDoc from '@/doc/forms/BasicDoc.vue';
|
||||
import DynamicDoc from '@/doc/forms/DynamicDoc.vue';
|
||||
import ImportDoc from '@/doc/forms/ImportDoc.vue';
|
||||
|
|
@ -19,6 +20,11 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'download',
|
||||
label: 'Download',
|
||||
component: DownloadDoc
|
||||
},
|
||||
{
|
||||
id: 'import',
|
||||
label: 'Import',
|
||||
|
|
|
|||
Loading…
Reference in New Issue