Skip to main content

<Error>

The <Error> component can be used to display a form error (it requires the context to be set).

Props​

<Submit> takes the following props:

PropertyTypeDefaultDescription
ComponentIElementType'div'The tag element to render the error in
errorPathstring'main'The path inside the error object (type IError) to display
globalbooleanDisplay only global error
...restunknown[]All props are forwarded to the <Component> element

Usage​

0
main error =
main global error =
native error =
native text error =
validator error = 
import type { FormEvent } from 'react';
import type { IProps } from '../types';
import {
  Error,
  FormProvider,
  type IFormValues,
  useForm,
} from '@per-form/react';

const validators = {
  text: (values: IFormValues) =>
    String(values.text).includes('foo') ? '' : 'Value does not include "foo"',
};

export default function Demo(props: IProps) {
  function handleSubmit(_e: FormEvent<HTMLFormElement>, values: IFormValues) {
    console.log(values);
  }

  const { formProps, ...context } = useForm({
    ...props,
    onSubmit: handleSubmit,
    validators,
  });

  return (
    <FormProvider {...context}>
      <form {...formProps}>
        <input name="text" required />
        <div>
          main error = <Error Component="span" />
        </div>
        <div>
          main global error = <Error Component="span" global />
        </div>
        <div>
          native error = <Error Component="span" errorPath="native" />
        </div>
        <div>
          native text error = <Error Component="span" errorPath="native.text" />
        </div>
        <div>
          validator error = <Error Component="span" errorPath="validator" />
        </div>
        <input type="submit" />
      </form>
    </FormProvider>
  );
}