@solidstarters/solid-core-ui 1.1.47 → 1.1.50

package/src/components/core/form/SolidFormView.tsx

@@ -7,7 +7,7 @@ import { useGetSolidViewLayoutQuery } from "@/redux/api/solidViewApi";
 import { useLazyCheckIfPermissionExistsQuery } from "@/redux/api/userApi";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 import { useFormik } from "formik";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import "primeflex/primeflex.css";
 import { Button } from "primereact/button";
 import { Dialog } from "primereact/dialog";
@@ -52,7 +52,7 @@ export type SolidFormViewProps = {
     handlePopupClose?: any,
     customCreateHandler?: any
     inlineCreateAutoSave?: boolean,
-    customLayout?: any
+    customLayout?: any,
 };
 
 
@@ -144,7 +144,7 @@ const fieldFactory = (type: string, fieldContext: SolidFieldProps): ISolidField
 }
 
 // solidFieldsMetadata={solidFieldsMetadata} solidView={solidView}
-const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidFormViewMetaData, modelName, readOnly, onChange, onBlur }: any) => {
+const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidFormViewMetaData, modelName, readOnly, viewMode, onChange, onBlur }: any) => {
     const fieldContext: SolidFieldProps = {
         // field metadata - coming from the field-metadata table.
         fieldMetadata: fieldMetadata,
@@ -156,6 +156,7 @@ const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidForm
         solidFormViewMetaData: solidFormViewMetaData,
         modelName: modelName,
         readOnly: readOnly,
+        viewMode: viewMode,
         onChange: onChange,
         onBlur: onBlur
     }
@@ -345,11 +346,15 @@ const SolidFormView = (params: SolidFormViewProps) => {
     const pathname = usePathname();
     const router = useRouter();
     const toast = useRef<Toast>(null);
+    const searchParams = useSearchParams();
+    const viewModeFromURL = searchParams.get("viewMode");
+
     const [redirectToList, setRedirectToList] = useState(false);
 
     const [isDeleteDialogVisible, setDeleteDialogVisible] = useState(false);
 
     const [actionsAllowed, setActionsAllowed] = useState<string[]>([]);
+    const [viewMode, setViewMode] = useState<"view" | "edit">("view");
 
     const errorFields: string[] = [];
 
@@ -357,7 +362,30 @@ const SolidFormView = (params: SolidFormViewProps) => {
     const op = useRef(null);
 
     useEffect(() => {
+        if (viewModeFromURL === "edit" || viewModeFromURL === "view") {
+            setViewMode(viewModeFromURL);
+        } else {
+            setViewMode("view"); // Default to 'view' if not present
+        }
+        if (params.id === 'new') {
+            setViewMode("edit");
+        }
+    }, [viewModeFromURL]);
+
+
+    // function that updates view mode 
+    const updateViewMode = (newMode: "view" | "edit") => {
+        setViewMode(newMode);
+        const params = new URLSearchParams(searchParams.toString());
+        params.set("viewMode", newMode);
+        router.push(`${pathname}?${params.toString()}`, { scroll: false });
+    };
+
+
+
 
+
+    useEffect(() => {
         const fetchPermissions = async () => {
             if (params.modelName) {
                 const permissionNames = [
@@ -540,14 +568,18 @@ const SolidFormView = (params: SolidFormViewProps) => {
                     // createEntity(formData);
                     const result = await createEntity(formData).unwrap();
                     showToast("success", "Form saved", "Form saved successfully!");
-                    const updatedUrl = pathname.replace("new", result?.data?.id);
-                    router.push(updatedUrl);
+                    if (!params.embeded) {
+                        const updatedUrl = pathname.replace("new", result?.data?.id);
+                        router.push(updatedUrl);
+                    }
                 }
                 else {
                     // updateEntity({ id: +params.id, data: formData });
                     await updateEntity({ id: +params.id, data: formData }).unwrap();
                     // const result = await updateEntity({ id: +params.id, data: formData }).unwrap();
-                    showToast("success", "Form Updated", "Form updated successfully!");
+                    if (!params.embeded) {
+                        showToast("success", "Form Updated", "Form updated successfully!");
+                    }
                 }
             }
 
@@ -618,7 +650,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
 
     useEffect(() => {
         if (solidFormViewMetaData) {
-            let formLayout = solidFormViewMetaData; 
+            let formLayout = solidFormViewMetaData;
             const dynamicHeader = solidFormViewMetaData?.data?.solidView?.layout?.onFormLayoutLoad;
             let DynamicFunctionComponent = null;
             const event: SolidLoadForm = {
@@ -634,7 +666,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                     if (updatedFormLayout && updatedFormLayout?.layoutChanged && updatedFormLayout?.newLayout) {
                         const newFormLayout = {
                             ...formLayout,
-                            data : {
+                            data: {
                                 ...formLayout.data,
                                 solidView: {
                                     ...formLayout.data.solidView,
@@ -659,23 +691,23 @@ const SolidFormView = (params: SolidFormViewProps) => {
         const handleDynamicFunction = async () => {
             if (solidFormViewData) {
                 const dynamicHeader = solidFormViewMetaData?.data?.solidView?.layout?.onFormDataLoad;
-    
+
                 let DynamicFunctionComponent = null;
                 let formViewData = solidFormViewData?.data;
-    
+
                 const event: SolidLoadForm = {
                     fieldsMetadata: solidFormViewMetaData,
                     formData: solidFormViewData?.data,
                     type: dynamicHeader,
                     viewMetadata: solidFormViewMetaData?.data?.solidView
                 };
-    
+
                 if (dynamicHeader) {
                     DynamicFunctionComponent = getExtensionFunction(dynamicHeader);
-    
+
                     if (DynamicFunctionComponent) {
                         const updatedFormData = await DynamicFunctionComponent(event);
-    
+
                         if (updatedFormData && updatedFormData?.dataChanged && updatedFormData?.newFormData) {
                             formViewData = updatedFormData.newFormData;
                         }
@@ -684,7 +716,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                 setInitialEntityData(formViewData);
             }
         };
-    
+
         handleDynamicFunction();
     }, [solidFormViewData]);
 
@@ -897,6 +929,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                             solidFormViewMetaData={solidFormViewMetaData}
                             modelName={params.modelName}
                             readOnly={readOnlyPermission}
+                            viewMode={viewMode}
                             onChange={formFieldOnXXX}
                             onBlur={formFieldOnXXX}
                         />;
@@ -1079,6 +1112,8 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                             />
                                         </div>
                                     } */}
+
+                                    {/* Inline */}
                                     {params.embeded == true &&
                                         actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
                                         !formViewLayout.attrs.readonly &&
@@ -1112,6 +1147,17 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                     <div className="form-wrapper-title"> {editHeaderTitle}</div>
                                 </div>
                                 <div className="gap-3 flex">
+                                    {params.embeded !== true && viewMode === "view" &&
+                                        <div>
+                                            <Button
+                                                label="Edit"
+                                                size="small"
+                                                onClick={() => updateViewMode("edit")}
+                                                type="button"
+                                            />
+                                        </div>
+                                    }
+
                                     {params.embeded !== true &&
                                         actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
                                         !formViewLayout.attrs.readonly &&
@@ -1125,6 +1171,8 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                             />
                                         </div>
                                     }
+
+                                    {/* Inline */}
                                     {params.embeded == true &&
                                         actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
                                         !formViewLayout.attrs.readonly &&
@@ -1186,13 +1234,13 @@ const SolidFormView = (params: SolidFormViewProps) => {
                     } */}
                     {params.embeded !== true &&
                         // <div className="solid-form-stepper">
-                            <SolidFormHeader 
-                                // solidFormViewMetaData={solidFormViewMetaData?.data?.solidView?.model}
-                                solidFormViewMetaData={solidFormViewMetaData}
-                                initialEntityData={initialEntityData}
-                                modelName={params.modelName}
-                                id={params.id}
-                            />
+                        <SolidFormHeader
+                            // solidFormViewMetaData={solidFormViewMetaData?.data?.solidView?.model}
+                            solidFormViewMetaData={solidFormViewMetaData}
+                            initialEntityData={initialEntityData}
+                            modelName={params.modelName}
+                            id={params.id}
+                        />
                         // </div>
                     }
                     <div className="p-4 solid-form-content">

package/src/components/core/form/fields/ISolidField.tsx

@@ -9,6 +9,7 @@ export type SolidFieldProps = {
     data: any,
     modelName?: any,
     readOnly?: any,
+    viewMode? :any
     onChange?: any,
     onBlur?: any
 };

package/src/components/core/form/fields/SolidBooleanField.tsx

@@ -36,8 +36,8 @@ export class SolidBooleanField implements ISolidField {
 
         // Ensure the value is always a string "true" or "false"
         const result = existingValue
-        ? (existingValue === true || existingValue === "true" ? "true" : "false") 
-        : (fieldDefaultValue === true || fieldDefaultValue === "true" ? "true" : "false");
+            ? (existingValue === true || existingValue === "true" ? "true" : "false")
+            : (fieldDefaultValue === true || fieldDefaultValue === "true" ? "true" : "false");
         return result;
     }
 
@@ -96,38 +96,52 @@ export class SolidBooleanField implements ISolidField {
         if (!renderMode) {
             renderMode = 'field-selectbox';
         }
+        const viewMode: string = this.fieldContext.viewMode;
+        let DynamicWidget = getExtensionComponent("SolidFormFieldViewModeWidget");
+        const widgetProps = {
+            label: fieldLabel,
+            value: formik.values[fieldLayoutInfo.attrs.name],
+        }
         return (
             <>
-                {renderMode &&
-                    this.renderExtensionRenderMode(renderMode, formik) 
+                {viewMode === "view" &&
+                    DynamicWidget && <DynamicWidget {...widgetProps} />
+                }
+                {viewMode === "edit" && (
+                    <>
+                        {renderMode &&
+                            this.renderExtensionRenderMode(renderMode, formik)
+                        }
+                        {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                            <div className="absolute mt-1">
+                                <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                            </div>
+                        )}
+                    </>
+                )
                 }
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    </div>
-                )}
             </>
         );
 
-        
+
     }
 
 
-    renderExtensionRenderMode(widgetName: string, formik: FormikObject) { 
-            let DynamicWidget = getExtensionComponent(widgetName);
-            if (!DynamicWidget) {
-                DynamicWidget = getExtensionComponent('field-selectbox');
-            }
-            const widgetProps: SolidBooleanFieldWidgetProps = {
-                formik: formik,
-                fieldContext: this.fieldContext,
-            }
-            return (
-                <>
-                    {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                </>
-            )
+    renderExtensionRenderMode(widgetName: string, formik: FormikObject) {
+        let DynamicWidget = getExtensionComponent(widgetName);
+        if (!DynamicWidget) {
+            DynamicWidget = getExtensionComponent('field-selectbox');
         }
+        const widgetProps: SolidBooleanFieldWidgetProps = {
+            formik: formik,
+            fieldContext: this.fieldContext,
+        }
+        return (
+            <>
+                {DynamicWidget && <DynamicWidget {...widgetProps} />}
+            </>
+        )
+    }
+
 
-    
 }

package/src/components/core/form/fields/SolidDateField.tsx

@@ -5,6 +5,7 @@ import { useRef } from "react";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { getExtensionComponent } from "@/helpers/registry";
 
 export class SolidDateField implements ISolidField {
 
@@ -60,41 +61,54 @@ export class SolidDateField implements ISolidField {
 
         const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
         // const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
-
+        const viewMode: string = this.fieldContext.viewMode;
+        let DynamicWidget = getExtensionComponent("SolidFormFieldViewModeWidget");
+        const widgetProps = {
+            label: fieldLabel,
+            value: formik.values[fieldLayoutInfo.attrs.name],
+        }
         return (
-            <div className={className}>
-                <div className="relative">
-                    <div className="flex flex-column gap-2 mt-4">
-                        {showFieldLabel != false &&
-                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                            </label>
-                        }
-                        <Calendar
-                            disabled={formDisabled || fieldDisabled || readOnlyPermission}
-                            ref={calendarRef} // Attach ref to Calendar
-                            id={fieldLayoutInfo.attrs.name}
-                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                            name={fieldLayoutInfo.attrs.name}
-                            // onChange={formik.handleChange}
-                            onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
-                            //@ts-ignore
-                            value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
-                            // dateFormat="mm/dd/yy"
-                            // placeholder="mm/dd/yyyy hh:mm"
-                            mask="99/99/9999 99:99"
-                            hideOnDateTimeSelect
-                            className=""
-                        />
+            <>
+                {viewMode === "view" &&
+                    <div className={className}>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
                     </div>
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <div className="absolute mt-1">
-                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                }
+                {viewMode === "edit" && (
+                    <div className={className}>
+                        <div className="relative">
+                            <div className="flex flex-column gap-2 mt-4">
+                                {showFieldLabel != false &&
+                                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                                    </label>
+                                }
+                                <Calendar
+                                    disabled={formDisabled || fieldDisabled || readOnlyPermission}
+                                    ref={calendarRef} // Attach ref to Calendar
+                                    id={fieldLayoutInfo.attrs.name}
+                                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                                    onChange={formik.handleChange}
+                                    //@ts-ignore
+                                    value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
+                                    // dateFormat="mm/dd/yy"
+                                    // placeholder="mm/dd/yyyy hh:mm"
+                                    mask="99/99/9999 99:99"
+                                    hideOnDateTimeSelect
+                                    className=""
+                                />
+                            </div>
+                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                <div className="absolute mt-1">
+                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                </div>
+                            )}
                         </div>
-                    )}
-                </div>
-            </div>
+                    </div>
+                )
+                }
+            </>
         );
     }
 }

package/src/components/core/form/fields/SolidDateTimeField.tsx

@@ -5,6 +5,7 @@ import { useRef } from "react";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { getExtensionComponent } from "@/helpers/registry";
 
 export class SolidDateTimeField implements ISolidField {
 
@@ -58,43 +59,55 @@ export class SolidDateTimeField implements ISolidField {
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
         const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
-
+        const viewMode: string = this.fieldContext.viewMode;
+        let DynamicWidget = getExtensionComponent("SolidFormFieldViewModeWidget");
+        const widgetProps = {
+            label: fieldLabel,
+            value: formik.values[fieldLayoutInfo.attrs.name],
+        }
         return (
-            <div className={className}>
-                <div className="relative">
-                    <div className="flex flex-column gap-2 mt-4">
-                        {showFieldLabel != false &&
-                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                            </label>
-                        }
-                        <Calendar
-                            disabled={formDisabled || fieldDisabled || readOnlyPermission}
-                            ref={calendarRef} // Attach ref to Calendar
-                            id={fieldLayoutInfo.attrs.name}
-                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                            // onChange={formik.handleChange}
-                            name={fieldLayoutInfo.attrs.name}
-                            onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
-                            //@ts-ignore
-                            value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
-                            // dateFormat="mm/dd/yy"
-                            // placeholder="mm/dd/yyyy hh:mm"
-                            mask="99/99/9999 99:99"
-                            hideOnDateTimeSelect
-                            showTime className=""
-                            hourFormat="24"
-
-                        />
+            <>
+               {viewMode === "view" &&
+                    <div className={className}>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
                     </div>
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <div className="absolute mt-1">
-                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                }
+                {viewMode === "edit" &&
+                    <div className={className}>
+                        <div className="relative">
+                            <div className="flex flex-column gap-2 mt-4">
+                                {showFieldLabel != false &&
+                                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                                    </label>
+                                }
+                                <Calendar
+                                    disabled={formDisabled || fieldDisabled || readOnlyPermission}
+                                    ref={calendarRef} // Attach ref to Calendar
+                                    id={fieldLayoutInfo.attrs.name}
+                                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                                    onChange={formik.handleChange}
+                                    //@ts-ignore
+                                    value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
+                                    // dateFormat="mm/dd/yy"
+                                    // placeholder="mm/dd/yyyy hh:mm"
+                                    mask="99/99/9999 99:99"
+                                    hideOnDateTimeSelect
+                                    showTime className=""
+                                    hourFormat="24"
+
+                                />
+                            </div>
+                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                <div className="absolute mt-1">
+                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                </div>
+                            )}
                         </div>
-                    )}
-                </div>
-            </div>
+                    </div>
+                }
+            </>
         );
     }
 }

package/src/components/core/form/fields/SolidDecimalField.tsx

@@ -4,6 +4,7 @@ import { Message } from "primereact/message";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { getExtensionComponent } from "@/helpers/registry";
 
 export class SolidDecimalField implements ISolidField {
 
@@ -70,35 +71,50 @@ export class SolidDecimalField implements ISolidField {
         const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
         const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
+        const viewMode: string = this.fieldContext.viewMode;
+        let DynamicWidget = getExtensionComponent("SolidFormFieldViewModeWidget");
+        const widgetProps = {
+            label: fieldLabel,
+            value: formik.values[fieldLayoutInfo.attrs.name],
+        }
         return (
-            <div className={className}>
-                <div className="relative">
-                    <div className="flex flex-column gap-2 mt-4">
-                        {showFieldLabel != false &&
-                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                            </label>
-                        }
-                        <InputNumber
-                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                            disabled={formDisabled || fieldDisabled}
-                            id={fieldLayoutInfo.attrs.name}
-                            minFractionDigits={2}
-                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                            onChange={(e: any) => {
-                                formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)
-                            }}
-                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        />
+            <>
+               {viewMode === "view" &&
+                    <div className={className}>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
                     </div>
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <div className="absolute mt-1">
-                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                }
+                {viewMode === "edit" && (
+                    <div className={className}>
+                        <div className="relative">
+                            <div className="flex flex-column gap-2 mt-4">
+                                {showFieldLabel != false &&
+                                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                                    </label>
+                                }
+                                <InputNumber
+                                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                                    disabled={formDisabled || fieldDisabled}
+                                    id={fieldLayoutInfo.attrs.name}
+                                    minFractionDigits={2}
+                                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                                    onChange={(e: any) => {
+                                        formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)
+                                    }}
+                                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                                />
+                            </div>
+                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                <div className="absolute mt-1">
+                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                </div>
+                            )}
                         </div>
-                    )}
-                </div>
-            </div>
+                    </div>
+                )}
+            </>
         );
     }
 }