diff --git a/js/apps/admin-ui/src/components/dynamic/MultivaluedStringComponent.tsx b/js/apps/admin-ui/src/components/dynamic/MultivaluedStringComponent.tsx index 4ee6b405cf3..3fd13a9da22 100644 --- a/js/apps/admin-ui/src/components/dynamic/MultivaluedStringComponent.tsx +++ b/js/apps/admin-ui/src/components/dynamic/MultivaluedStringComponent.tsx @@ -32,6 +32,7 @@ export const MultiValuedStringComponent = ({ aria-label={t(label!)} name={fieldName} isDisabled={isDisabled} + isRequired={required} defaultValue={convertDefaultValue(defaultValue)} addButtonLabel={t("addMultivaluedLabel", { fieldLabel: t(label!).toLowerCase(), diff --git a/js/apps/admin-ui/src/components/multi-line-input/MultiLineInput.tsx b/js/apps/admin-ui/src/components/multi-line-input/MultiLineInput.tsx index 2f0ebf9e32d..f9b7f617cc7 100644 --- a/js/apps/admin-ui/src/components/multi-line-input/MultiLineInput.tsx +++ b/js/apps/admin-ui/src/components/multi-line-input/MultiLineInput.tsx @@ -10,6 +10,7 @@ import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons"; import { Fragment, useEffect, useMemo } from "react"; import { useFormContext, useWatch } from "react-hook-form"; import { useTranslation } from "react-i18next"; +import { FormErrorText } from "@keycloak/keycloak-ui-shared"; function stringToMultiline(value?: string): string[] { return typeof value === "string" ? value.split("##") : [value || ""]; @@ -39,7 +40,13 @@ export const MultiLineInput = ({ ...rest }: MultiLineInputProps) => { const { t } = useTranslation(); - const { register, setValue, control } = useFormContext(); + const { + register, + getValues, + setValue, + control, + formState: { errors }, + } = useFormContext(); const value = useWatch({ name, control, @@ -84,15 +91,24 @@ export const MultiLineInput = ({ }); }; + if (typeof getValues(name) === "undefined") { + update(fields); // set initial default values + } + useEffect(() => { register(name, { validate: (value) => - isRequired && toStringValue(value || []).length === 0 + isRequired && + (stringify ? value : toStringValue(value || [])).length === 0 ? t("required") : undefined, }); }, [register]); + const getError = () => { + return name.split(".").reduce((record: any, key) => record?.[key], errors); + }; + return (