diff --git a/awx/ui_next/src/components/FormField/FormSubmitError.jsx b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
index f59b8a548a..3a85abfcd3 100644
--- a/awx/ui_next/src/components/FormField/FormSubmitError.jsx
+++ b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
@@ -18,8 +18,13 @@ function FormSubmitError({ error }) {
     }
     // check for field-specific errors from API
     if (error.response?.data && typeof error.response.data === 'object') {
-      setErrors(error.response.data);
-      setFormError(null);
+      const errorMessages = error.response.data;
+      setErrors(errorMessages);
+      if (errorMessages.__all__) {
+        setFormError({ message: errorMessages.__all__ });
+      } else {
+        setFormError(null);
+      }
     } else {
       /* eslint-disable-next-line no-console */
       console.error(error);
diff --git a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
index b1b1d5e277..422cabb721 100644
--- a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
+++ b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx
@@ -1,14 +1,10 @@
 import React, { useState } from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
-import { t } from '@lingui/macro';
-import { withI18n } from '@lingui/react';
 import { CardBody } from '@components/Card';
-import ErrorDetail from '@components/ErrorDetail';
-import AlertModal from '@components/AlertModal';
 import { HostsAPI } from '@api';
 import HostForm from '../shared';
 
-function HostAdd({ i18n }) {
+function HostAdd() {
   const [formError, setFormError] = useState(null);
   const history = useHistory();
   const hostsMatch = useRouteMatch('/hosts');
@@ -27,10 +23,6 @@ function HostAdd({ i18n }) {
       const { data: response } = await HostsAPI.create(values);
       history.push(`${url}/${response.id}/details`);
     } catch (error) {
-      // check for field-specific errors from API
-      if (error.response?.data && typeof error.response.data === 'object') {
-        throw error.response.data;
-      }
       setFormError(error);
     }
   };
@@ -41,20 +33,13 @@ function HostAdd({ i18n }) {
 
   return (
     <CardBody>
-      <HostForm handleSubmit={handleSubmit} handleCancel={handleCancel} />
-      {formError && (
-        <AlertModal
-          variant="danger"
-          title={i18n._(t`Error!`)}
-          isOpen={formError}
-          onClose={() => setFormError(null)}
-        >
-          {i18n._(t`An error occurred when saving Host`)}
-          <ErrorDetail error={formError} />
-        </AlertModal>
-      )}
+      <HostForm
+        handleSubmit={handleSubmit}
+        handleCancel={handleCancel}
+        submitError={formError}
+      />
     </CardBody>
   );
 }
 
-export default withI18n()(HostAdd);
+export default HostAdd;
diff --git a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
index d3fad5fb49..6b6e78313d 100644
--- a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
+++ b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
@@ -1,15 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory, useRouteMatch } from 'react-router-dom';
-import { t } from '@lingui/macro';
-import { withI18n } from '@lingui/react';
 import { CardBody } from '@components/Card';
-import ErrorDetail from '@components/ErrorDetail';
-import AlertModal from '@components/AlertModal';
 import { HostsAPI } from '@api';
 import HostForm from '../shared';
 
-function HostEdit({ host, i18n }) {
+function HostEdit({ host }) {
   const [formError, setFormError] = useState(null);
   const hostsMatch = useRouteMatch('/hosts/:id/edit');
   const inventoriesMatch = useRouteMatch(
@@ -35,13 +31,15 @@ function HostEdit({ host, i18n }) {
       await HostsAPI.update(host.id, values);
       history.push(detailsUrl);
     } catch (error) {
-      // check for field-specific errors from API
-      if (error.response?.data && typeof error.response.data === 'object') {
-        throw error.response.data;
-      }
+      console.log('caught:', error);
+      // // check for field-specific errors from API
+      // if (error.response?.data && typeof error.response.data === 'object') {
+      //   throw error.response.data;
+      // }
       setFormError(error);
     }
   };
+  console.log('render:', formError);
 
   const handleCancel = () => {
     history.push(detailsUrl);
@@ -53,18 +51,8 @@ function HostEdit({ host, i18n }) {
         host={host}
         handleSubmit={handleSubmit}
         handleCancel={handleCancel}
+        submitError={formError}
       />
-      {formError && (
-        <AlertModal
-          variant="danger"
-          title={i18n._(t`Error!`)}
-          isOpen={formError}
-          onClose={() => setFormError(null)}
-        >
-          {i18n._(t`An error occurred when saving Host`)}
-          <ErrorDetail error={formError} />
-        </AlertModal>
-      )}
     </CardBody>
   );
 }
@@ -73,5 +61,4 @@ HostEdit.propTypes = {
   host: PropTypes.shape().isRequired,
 };
 
-export { HostEdit as _HostEdit };
-export default withI18n()(HostEdit);
+export default HostEdit;
diff --git a/awx/ui_next/src/screens/Host/shared/HostForm.jsx b/awx/ui_next/src/screens/Host/shared/HostForm.jsx
index e8348dbfc1..7375040b5e 100644
--- a/awx/ui_next/src/screens/Host/shared/HostForm.jsx
+++ b/awx/ui_next/src/screens/Host/shared/HostForm.jsx
@@ -9,13 +9,13 @@ import { t } from '@lingui/macro';
 import { Form } from '@patternfly/react-core';
 
 import FormRow from '@components/FormRow';
-import FormField from '@components/FormField';
+import FormField, { FormSubmitError } from '@components/FormField';
 import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
 import { VariablesField } from '@components/CodeMirrorInput';
 import { required } from '@util/validators';
 import { InventoryLookup } from '@components/Lookup';
 
-function HostForm({ handleSubmit, handleCancel, host, i18n }) {
+function HostForm({ handleSubmit, handleCancel, host, submitError, i18n }) {
   const [inventory, setInventory] = useState(
     host ? host.summary_fields.inventory : ''
   );
@@ -30,13 +30,7 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) {
         inventory: host.inventory || '',
         variables: host.variables,
       }}
-      onSubmit={async (values, formik) => {
-        try {
-          await handleSubmit(values);
-        } catch (errors) {
-          formik.setErrors(errors);
-        }
-      }}
+      onSubmit={handleSubmit}
     >
       {formik => (
         <Form autoComplete="off" onSubmit={formik.handleSubmit}>
@@ -94,6 +88,7 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) {
           <FormActionGroup
             onCancel={handleCancel}
             onSubmit={formik.handleSubmit}
+            errorMessage={<FormSubmitError error={submitError} />}
           />
         </Form>
       )}
@@ -105,6 +100,7 @@ HostForm.propTypes = {
   handleSubmit: func.isRequired,
   handleCancel: func.isRequired,
   host: shape({}),
+  submitError: shape({}),
 };
 
 HostForm.defaultProps = {
@@ -117,6 +113,7 @@ HostForm.defaultProps = {
       inventory: null,
     },
   },
+  submitError: null,
 };
 
 export { HostForm as _HostForm };