Below we would like to explain how to write React Hook Form forms in an easy and fast way,\nwhy it makes sense to switch and what needs to be considered.
\nPreviously, we passed our self-written form component into the Configuration component's render function.\nIn the form we defined a prop for each entry, plus an onChange handler that takes the value and writes it to a state.\nAdditionally, we added validation logic when a field changes.
\nEspecially in old areas, which were still built with class components, you should be very careful.
\nA lot of boilerplate code was needed, errors were frequent, and typings were generally flawed.
\nReact Hook Form will bring the useForm hook to validate your form with minimal re-render.\nThis contains a generic parameter which summarizes the possible input fields.
The useForm hook returns an object with several properties:
\nregister allows you to register an input or select element and apply validation rules to React Hook Form.formState contains information about the form state. This can also specify isValid.handleSubmit is called when you press the submit button and will receive the form data if form validation is successful.reset reset either the entire form state or part of the form state.import React, { FC, useEffect } from \"react\";\n// import hook from react-hook-form library\nimport { useForm } from \"react-hook-form\";\n\nconst ReactHookForm: FC = () => {\n const {\n register,\n handleSubmit,\n formState: { errors },\n } = useForm<Name>();\n const [stored, setStored] = useState<Person>();\n\n const onSubmit = (person: Person) => {\n setStored(person);\n };\n\n return (\n <form onSubmit={handleSubmit(onSubmit)}>\n <InputField label=\"First Name\" autofocus={true} {...register(\"firstName\")} />\n <InputField\n label=\"Last Name\"\n {...register(\"lastName\", { required: true })}\n validationError={!!errors.lastName}\n errorMessage={\"Last name is required\"}\n />\n <Level className=\"pt-2\" right={<SubmitButton>Submit</SubmitButton>} />\n </form>\n );\n};UseConfigLink from @scm-manager/ui-api gets links via prop from binder and loads initial config asynchronously,\nalso specifies as reading part whether readOnly (no update link was set) and as writing part an update method.\nAs well as formProps for isLoading, isUpdating etc for ConfigurationForm.
import React, { FC, useEffect } from \"react\";\nimport { useForm } from \"react-hook-form\";\n\nconst GlobalConfig: FC<Props> = ({ link }) => {\n // formProps spread syntax returns prop for name, onBlur, onChange and ref and additionally attaches them to fields\n const { initialConfiguration, update, isReadOnly, ...formProps } = useConfigLink<GlobalConfigurationDto>(link);\n const { formState, handleSubmit, register, reset, control } = useForm<GlobalConfigurationDto>({\n // mode onChange should be specified so that validation takes place immediately!\n mode: \"onChange\",\n });\n\n // ...\n};ConfigurationForm only takes care of the display of the component. All the logic now lives in the hook.
\nRegistering your own onChange-handler is not necessary anymore.\nonSubmit handleSubmit-function passes own submit function, which is called with filled form data type.
In the register-function you can specify additional options for validation.\nFor example, required, min, max, pattern.
return (\n <ConfigurationForm isValid={formState.isValid} isReadOnly={isReadOnly} onSubmit={handleSubmit(update)} {...formProps}>\n <Title title={t(\"settings.title\")} />\n <Checkbox\n label={t(\"fastForwardOnly.label\")}\n helpText={t(\"fastForwardOnly.helpText\")}\n disabled={isReadOnly}\n {...register(\"fastForwardOnly\", { shouldUnregister: true })}\n />\n <InputField\n label={t(\"branchesAndTagsPatterns.label\")}\n helpText={t(\"branchesAndTagsPatterns.helpText\")}\n disabled={isReadOnly}\n {...register(\"branchesAndTagsPatterns\")}\n />\n <GpgVerificationControl control={control} isReadonly={isReadOnly} />\n </ConfigurationForm>\n);formStateBe sure to use as proxy to get objects out (not formState.isValid!), because you won't notice the render cycle otherwise.
\nIn synchronous loading, a form can be set to an initial value using defaultValue.\nIn the asynchronous case, values for each field can be set separately by using defaultValue={stored.fastForwardOnly} or an entire form using reset.
useEffect(() => {\n if (initialConfiguration) {\n reset(initialConfiguration);\n }\n}, [initialConfiguration]);FormFieldTypes is not a base, but helps for backwards compatibility with old function types. When writing a new component omit old onChange!forwardRef. It creates a reference that can be passed to an inner element.disabled in SCM-Manager won't be included on submission. If you want to prevent interaction but need to submit the value of a form element, readOnly is the better choice.Some implementations:
\n","description":"Below we would like to explain how to write React Hook Form forms in an easy and fast way,\nwhy it makes sense to switch and what needs to be considered. Legacy…","tableOfContents":"","frontmatter":{"title":"Building Forms","subtitle":"Howto build forms for SCM-Manager","displayToc":false,"description":null,"keywords":null,"image":null}}},"pageContext":{"slug":"/docs/3.9.x/en/development/building-forms/","version":"3.9.x","latestVersion":"3.11.x","latestPageVersion":"3.11.x","language":"en","relativePath":"/development/building-forms/","canonicalPath":"/docs/latest/en/development/building-forms/","latestRootPath":"/docs/3.11.x/en/"}}, "staticQueryHashes": ["1973669194","2742214048","2956773653","2957019495","698804963"]}