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 49aa1c6f0f..18044fd6b9 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 @@ -2,9 +2,9 @@ import { Button, ButtonVariant, InputGroup, + InputGroupItem, TextInput, TextInputProps, - InputGroupItem, } from "@patternfly/react-core"; import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons"; import { Fragment, useEffect, useMemo } from "react"; @@ -25,6 +25,7 @@ export type MultiLineInputProps = Omit & { isDisabled?: boolean; defaultValue?: string[]; stringify?: boolean; + isRequired?: boolean; }; export const MultiLineInput = ({ @@ -33,6 +34,7 @@ export const MultiLineInput = ({ isDisabled = false, defaultValue, stringify = false, + isRequired = false, id, ...rest }: MultiLineInputProps) => { @@ -78,11 +80,17 @@ export const MultiLineInput = ({ const fieldValue = values.flatMap((field) => field); setValue(name, stringify ? toStringValue(fieldValue) : fieldValue, { shouldDirty: true, + shouldValidate: true, }); }; useEffect(() => { - register(name); + register(name, { + validate: (value) => + isRequired && toStringValue(value || []).length === 0 + ? t("required") + : undefined, + }); }, [register]); return ( diff --git a/js/apps/admin-ui/src/organizations/NewOrganization.tsx b/js/apps/admin-ui/src/organizations/NewOrganization.tsx index af9fbe3ed5..e30df5afa5 100644 --- a/js/apps/admin-ui/src/organizations/NewOrganization.tsx +++ b/js/apps/admin-ui/src/organizations/NewOrganization.tsx @@ -22,7 +22,7 @@ export default function NewOrganization() { const { t } = useTranslation(); const navigate = useNavigate(); const { realm } = useRealm(); - const form = useForm(); + const form = useForm({ mode: "onChange" }); const { handleSubmit, formState } = form; const save = async (org: OrganizationFormType) => { diff --git a/js/apps/admin-ui/src/organizations/OrganizationForm.tsx b/js/apps/admin-ui/src/organizations/OrganizationForm.tsx index 2aca97fc82..7ae8f60737 100644 --- a/js/apps/admin-ui/src/organizations/OrganizationForm.tsx +++ b/js/apps/admin-ui/src/organizations/OrganizationForm.tsx @@ -1,5 +1,6 @@ import OrganizationRepresentation from "@keycloak/keycloak-admin-client/lib/defs/organizationRepresentation"; import { + FormErrorText, HelpItem, TextAreaControl, TextControl, @@ -33,7 +34,10 @@ export const OrganizationForm = ({ readOnly = false, }: OrganizationFormProps) => { const { t } = useTranslation(); - const { setValue } = useFormContext(); + const { + setValue, + formState: { errors }, + } = useFormContext(); const name = useWatch({ name: "name" }); useEffect(() => { @@ -64,13 +68,18 @@ export const OrganizationForm = ({ fieldLabelId="domain" /> } + isRequired > + {errors?.["domains"]?.message && ( + + )}