Form

Create form with translations is very similar to normal Forms.

Define schema

use-example.ts

import * as z from 'zod';
import { zodLanguageInput } from 'vitnode-frontend/helpers/zod';
 
export const useExample = () => {
  const formSchema = z.object({
    title: zodLanguageInput, 
  });
 
  return { formSchema };
};

You can set maxLength:

use-example.ts

const formSchema = z.object({
  content: zodLanguageInput
    .min(1, {
      message: t('errors.required'),
    })
    .refine(value => value.every(item => item.value.length <= 100), {
      message: t('errors.max_length', { length: 100 }),
    }),
});

Submit function

Create a function to handle form submit and export it.

use-example.ts

import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { zodLanguageInput } from 'vitnode-frontend/helpers/zod';
 
export const useExample = () => {
  const formSchema = z.object({
    title: zodLanguageInput,
  });
 
  const onSubmit = (values: z.infer<typeof formSchema>) => {
    // Do something
  };
 
  return { formSchema, onSubmit };
};

Build Form

example-form.tsx

import { AutoForm } from 'vitnode-frontend/form/auto-form';
import { AutoFormStringLanguageInput } from 'vitnode-frontend/form/fields/text-language-input'; 
import { useExample } from './use-example';
 
export const ExampleForm = () => {
  const { formSchema, onSubmit } = useExample();
 
  return (
    <AutoForm
      formSchema={formSchema}
      fields={[
        {
          id: 'title',
          component: AutoFormStringLanguageInput, 
        },
      ]}
    />
  );
};

Support form fields:

Define schema

Submit function

Build Form

On this page