IO-1034 Global required validation & error generation.

client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Form } from "antd";
+import { Form, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../alert/alert.component";
 import { Prompt, useLocation } from "react-router-dom";
@@ -20,9 +20,10 @@ export default function FormsFieldChanged({ form }) {
       style={{ margin: 0, padding: 0, minHeight: "unset" }}
     >
       {() => {
+        const errors = form.getFieldsError().filter((e) => e.errors.length > 0);
         if (form.isFieldsTouched())
           return (
-            <span>
+            <Space direction="vertical" style={{ width: "100%" }}>
               <Prompt
                 when={true}
                 message={(location) => {
@@ -47,7 +48,23 @@ export default function FormsFieldChanged({ form }) {
                   </div>
                 }
               />
-            </span>
+              {errors.length > 0 && (
+                <AlertComponent
+                  type="error"
+                  message={
+                    <div>
+                      <ul>
+                        {errors.map((e, idx) =>
+                          e.errors.map((e2, idx2) => (
+                            <li key={`${idx}${idx2}`}>{e2}</li>
+                          ))
+                        )}
+                      </ul>
+                    </div>
+                  }
+                />
+              )}
+            </Space>
           );
         return <div style={{ display: "none" }}></div>;
       }}