fix(settings): Surface slug validation errors on org settings form (#112556)

When changing the org slug to one already in use, the backend returns a
field-level error but the frontend was showing a generic 'Unable to save
change' toast. This was a regression from the form migration to TanStack
which landed after the backend fix.

Use setFieldErrors to display the API validation message inline on the
slug field instead of swallowing it.
<img width="1196" height="260" alt="Screenshot 2026-04-08 at 6 00 26 PM"
src="https://github.com/user-attachments/assets/77af01f0-f9b9-4fca-ab64-5754be786036"
/>

I kept the toast showing up so this diff remains small.

Fixes #112376

Co-authored-by: Claude <noreply@anthropic.com>

Author: cvxluo

static/app/views/settings/organizationGeneralSettings/organizationSettingsForm.spec.tsx

@@ -156,6 +156,28 @@ describe('OrganizationSettingsForm', () => {
     expect(screen.queryByRole('button', {name: 'Cancel'})).not.toBeInTheDocument();
   });
 
+  it('shows field error when slug is already taken', async () => {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/`,
+      method: 'PUT',
+      statusCode: 400,
+      body: {slug: ['The slug "taken" is in use by another organization.']},
+    });
+
+    render(
+      <OrganizationSettingsForm initialData={OrganizationFixture()} onSave={onSave} />
+    );
+
+    const input = screen.getByRole('textbox', {name: 'Organization Slug'});
+    await userEvent.clear(input);
+    await userEvent.type(input, 'taken');
+    await userEvent.click(screen.getByRole('button', {name: 'Save'}));
+
+    expect(
+      await screen.findByText('The slug "taken" is in use by another organization.')
+    ).toBeInTheDocument();
+  });
+
   it('can enable codecov', async () => {
     putMock = MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/`,

static/app/views/settings/organizationGeneralSettings/organizationSettingsForm.tsx

@@ -11,6 +11,7 @@ import {
   defaultFormOptions,
   FieldGroup,
   FormSearch,
+  setFieldErrors,
   useScrapsForm,
 } from '@sentry/scraps/form';
 import {Container, Flex} from '@sentry/scraps/layout';
@@ -29,6 +30,7 @@ import {ConfigStore} from 'sentry/stores/configStore';
 import type {MembershipSettingsProps} from 'sentry/types/hooks';
 import type {Organization} from 'sentry/types/organization';
 import {fetchMutation, useMutation} from 'sentry/utils/queryClient';
+import {RequestError} from 'sentry/utils/requestError/requestError';
 import {slugify} from 'sentry/utils/slugify';
 import {useMembers} from 'sentry/utils/useMembers';
 import {useOrganization} from 'sentry/utils/useOrganization';
@@ -437,10 +439,14 @@ export function OrganizationSettingsForm({initialData, onSave}: Props) {
     ...defaultFormOptions,
     defaultValues: {slug: initialData.slug},
     validators: {onDynamic: slugSchema},
-    onSubmit: ({value}) =>
+    onSubmit: ({value, formApi}) =>
       updateSlug({slug: value.slug})
         .then(() => slugForm.reset())
-        .catch(() => {}),
+        .catch(error => {
+          if (error instanceof RequestError) {
+            setFieldErrors(formApi, error);
+          }
+        }),
   });
 
   return (