diff --git a/ui/lib/ldap/addon/components/page/role/create-and-edit.ts b/ui/lib/ldap/addon/components/page/role/create-and-edit.ts
index c1ba732cdf..7c278e0f09 100644
--- a/ui/lib/ldap/addon/components/page/role/create-and-edit.ts
+++ b/ui/lib/ldap/addon/components/page/role/create-and-edit.ts
@@ -9,7 +9,6 @@ import { action } from '@ember/object';
 import { service } from '@ember/service';
 import { task } from 'ember-concurrency';
 import { waitFor } from '@ember/test-waiters';
-import errorMessage from 'vault/utils/error-message';
 
 import { LdapRolesCreateRouteModel } from 'ldap/routes/roles/create';
 import { Breadcrumb, ValidationMap } from 'vault/vault/app-types';
@@ -133,7 +132,11 @@ export default class LdapCreateAndEditRolePageComponent extends Component<Args>
             name
           );
         } catch (error) {
-          this.error = errorMessage(error, 'Error saving role. Please try again or contact support.');
+          const { message } = await this.api.parseError(
+            error,
+            'Error saving role. Please try again or contact support.'
+          );
+          this.error = message;
         }
       }
     })
diff --git a/ui/tests/helpers/stubs.js b/ui/tests/helpers/stubs.js
index 53692f0645..efee319f17 100644
--- a/ui/tests/helpers/stubs.js
+++ b/ui/tests/helpers/stubs.js
@@ -66,11 +66,7 @@ export function allowAllCapabilitiesStub(capabilitiesList = ['root']) {
  */
 export function overrideResponse(httpStatus = 200, payload = {}) {
   if (httpStatus === 403) {
-    return new Response(
-      403,
-      { 'Content-Type': 'application/json' },
-      JSON.stringify({ errors: ['permission denied'] })
-    );
+    return new Response(403, { 'Content-Type': 'application/json' }, formatError('permission denied'));
   }
   if (httpStatus === 404) {
     return new Response(404, { 'Content-Type': 'application/json' });
@@ -80,3 +76,5 @@ export function overrideResponse(httpStatus = 200, payload = {}) {
   }
   return new Response(httpStatus, { 'Content-Type': 'application/json' }, payload);
 }
+
+export const formatError = (msg) => JSON.stringify({ errors: [msg] });
diff --git a/ui/tests/integration/components/ldap/page/role/create-and-edit-test.js b/ui/tests/integration/components/ldap/page/role/create-and-edit-test.js
index 32e55963a8..e469725fa0 100644
--- a/ui/tests/integration/components/ldap/page/role/create-and-edit-test.js
+++ b/ui/tests/integration/components/ldap/page/role/create-and-edit-test.js
@@ -13,6 +13,7 @@ import sinon from 'sinon';
 import { GENERAL } from 'vault/tests/helpers/general-selectors';
 import LdapStaticRoleForm from 'vault/forms/secrets/ldap/roles/static';
 import LdapDynamicRoleForm from 'vault/forms/secrets/ldap/roles/dynamic';
+import { formatError, overrideResponse } from 'vault/tests/helpers/stubs';
 
 module('Integration | Component | ldap | Page::Role::CreateAndEdit', function (hooks) {
   setupRenderingTest(hooks);
@@ -234,4 +235,32 @@ module('Integration | Component | ldap | Page::Role::CreateAndEdit', function (h
       'Transitions to role details route on save success'
     );
   });
+
+  test('it should display api error when creating static roles fails', async function (assert) {
+    this.server.post('/:backend/static-role/:name', () => {
+      return overrideResponse(500, formatError('uh oh!'));
+    });
+    this.model = this.createModel;
+    await this.renderComponent();
+    await fillIn(GENERAL.inputByAttr('name'), 'test-role');
+    await fillIn(GENERAL.inputByAttr('dn'), 'foo');
+    await fillIn(GENERAL.inputByAttr('username'), 'bar');
+    await fillIn(GENERAL.ttl.input('Rotation period'), 5);
+    await click(GENERAL.submitButton);
+    assert
+      .dom(GENERAL.messageError)
+      .hasText('Error uh oh!', 'it renders error message returned from the API');
+  });
+
+  test('it should display api error when creating dynamic roles fails', async function (assert) {
+    this.server.post('/:backend/role/:name', () => {
+      return overrideResponse(500, formatError('uh oh!'));
+    });
+    this.model = this.dynamicEditModel;
+    await this.renderComponent();
+    await click(GENERAL.submitButton);
+    assert
+      .dom(GENERAL.messageError)
+      .hasText('Error uh oh!', 'it renders error message returned from the API');
+  });
 });