Function getFormHelpers

site/src/utils/formUtils.ts:37–87

(form: FormikContextType<TFormValues>, error?: unknown)

export const getFormHelpers =
	<TFormValues>(form: FormikContextType<TFormValues>, error?: unknown) =>
	(fieldName: string, options: GetFormHelperOptions = {}): FormHelpers => {
		const {
			backendFieldName,
			helperText: defaultHelperText,
			maxLength,
		} = options;
		let helperText = defaultHelperText;
		const apiValidationErrors = isApiValidationError(error)
			? (mapApiErrorToFieldErrors(
					error.response.data,
				) as FormikErrors<TFormValues> & { [key: string]: string })
			: undefined;
		// Since the fieldName can be a path string like parameters[0].value we need to use getIn
		const touched = Boolean(getIn(form.touched, fieldName.toString()));
		const formError = getIn(form.errors, fieldName.toString());
		// Since the field in the form can be different from the backend, we need to
		// check for both when getting the error
		const apiField = backendFieldName ?? fieldName;
		const apiError = apiValidationErrors?.[apiField.toString()];

		const fieldProps = form.getFieldProps(fieldName);
		const value = fieldProps.value;

		let lengthError: ReactNode = null;
		// Show a message if the input is approaching or over the maximum length.
		if (
			maxLength &&
			maxLength > 0 &&
			typeof value === "string" &&
			value.length > maxLength - 30
		) {
			helperText = `This cannot be longer than ${maxLength} characters. (${value.length}/${maxLength})`;
			// Show it as an error, rather than a hint
			if (value.length > maxLength) {
				lengthError = helperText;
			}
		}

		// API and regular validation errors should wait to be shown, but length errors should
		// be more responsive.
		const errorToDisplay =
			(touched && apiError) || lengthError || (touched && formError);

		return {
			...fieldProps,
			id: fieldName.toString(),
			error: Boolean(errorToDisplay),
			helperText: errorToDisplay || helperText,
		};
	};

export const onChangeTrimmed =
	<T>(form: FormikContextType<T>, callback?: (value: string) => void) =>