From 496d06b0e9a16fe07ca63b0ea7a84e1095a9f509 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sigurd=20Gr=C3=B8neng?= Date: Thu, 28 Sep 2023 12:44:16 +0200 Subject: [PATCH] =?UTF-8?q?Bedre=20feilmelding=20p=C3=A5=20max-lengde=20(#?= =?UTF-8?q?494)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../henvendelseInput/MeldingInputBox.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/view/dialog/henvendelseInput/MeldingInputBox.tsx b/src/view/dialog/henvendelseInput/MeldingInputBox.tsx index 7be9b94a..0ce18b6f 100644 --- a/src/view/dialog/henvendelseInput/MeldingInputBox.tsx +++ b/src/view/dialog/henvendelseInput/MeldingInputBox.tsx @@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'; import { Alert, Button, ErrorMessage } from '@navikt/ds-react'; import classNames from 'classnames'; import React, { ChangeEvent, useEffect, useLayoutEffect, useRef, useState } from 'react'; -import { useForm } from 'react-hook-form'; +import { FieldError, useForm } from 'react-hook-form'; import { z } from 'zod'; import loggEvent from '../../../felleskomponenter/logging'; @@ -93,7 +93,8 @@ const MeldingInputBox = (props: Props) => { register, handleSubmit, reset, - formState: { errors, isSubmitting } + formState: { errors, isSubmitting }, + getValues } = useForm({ defaultValues, resolver: zodResolver(schema) @@ -125,6 +126,8 @@ const MeldingInputBox = (props: Props) => { }); }; + console.log(errors); + return (
{ ) : null} {errors.melding ? ( - {errors.melding.message} + {betterErrorMessage(errors.melding, getValues('melding')).message} ) : null} {noeFeilet ? ( @@ -194,4 +197,14 @@ const MeldingInputBox = (props: Props) => { ); }; +const betterErrorMessage = (error: FieldError, melding: string): FieldError => { + const tooBig = error.type === 'too_big'; + return { + ...error, + message: tooBig + ? `Meldingen kan ikke være mer enn ${maxMeldingsLengde} tegn, men er ${melding.length}` + : error.message + }; +}; + export default MeldingInputBox;