Form

amerta

amerta / amerta/theme/ui/form / Form

Variable: Form()

const Form: <TFieldValues, TContext, TTransformedValues>(props) => Element = FormProvider

Defined in: amerta/theme/ui/form.tsx:19

A provider component that propagates the useForm methods to all children components via React Context API. To be used with useFormContext.

Type Parameters

| Type Parameter | Default type | | ------ | ------ | | TFieldValues extends FieldValues | - | | TContext | any | | TTransformedValues | TFieldValues |

Parameters

| Parameter | Type | Description | | ------ | ------ | ------ | | props | FormProviderProps<TFieldValues, TContext, TTransformedValues> | all useForm methods |

Returns

Element

Remarks

API • Demo

Example

function App() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <FormProvider {...methods} >
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  );
}

 function NestedInput() {
  const { register } = useFormContext(); // retrieve all hook methods
  return <input {...register("test")} />;
}