diff --git a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
index 7ad011719b..4da1191de4 100644
--- a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
+++ b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
@@ -5,11 +5,6 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { ActionGroup as PFActionGroup, Button } from '@patternfly/react-core';
 
-const ErrorMessage = styled('div')`
-  color: var(--pf-global--danger-color--200);
-  font-weight: var(--pf-global--FontWeight--bold);
-`;
-
 const ActionGroup = styled(PFActionGroup)`
   display: flex;
   justify-content: flex-end;
@@ -34,7 +29,7 @@ const FormActionGroup = ({
   i18n,
 }) => (
   <ActionGroup>
-    {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : null}
+    {errorMessage}
     <Button
       aria-label={i18n._(t`Save`)}
       variant="primary"
diff --git a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.test.jsx b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.test.jsx
index 9290e1aa72..3a810aa884 100644
--- a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.test.jsx
+++ b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.test.jsx
@@ -4,10 +4,21 @@ import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import FormActionGroup from './FormActionGroup';
 
 describe('FormActionGroup', () => {
-  test('renders the expected content', () => {
+  test('should render the expected content', () => {
     const wrapper = mountWithContexts(
       <FormActionGroup onSubmit={() => {}} onCancel={() => {}} />
     );
     expect(wrapper).toHaveLength(1);
   });
+
+  test('should display error message if given', () => {
+    const wrapper = mountWithContexts(
+      <FormActionGroup
+        onSubmit={() => {}}
+        onCancel={() => {}}
+        errorMessage={<div className="error">oh noes</div>}
+      />
+    );
+    expect(wrapper.find('.error').text()).toEqual('oh noes');
+  });
 });
diff --git a/awx/ui_next/src/components/FormField/FormSubmitError.jsx b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
index e9adcc0ca1..f59b8a548a 100644
--- a/awx/ui_next/src/components/FormField/FormSubmitError.jsx
+++ b/awx/ui_next/src/components/FormField/FormSubmitError.jsx
@@ -1,5 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { useFormikContext } from 'formik';
+import styled from 'styled-components';
+
+const ErrorMessage = styled('div')`
+  color: var(--pf-global--danger-color--200);
+  font-weight: var(--pf-global--FontWeight--bold);
+`;
+ErrorMessage.displayName = 'ErrorMessage';
 
 function FormSubmitError({ error }) {
   const [formError, setFormError] = useState(null);
@@ -24,7 +31,7 @@ function FormSubmitError({ error }) {
     return null;
   }
 
-  return <span>{formError.message}</span>;
+  return <ErrorMessage>{formError.message}</ErrorMessage>;
 }
 
 export default FormSubmitError;