fix[angular-gen2]: Better error handling on form submissions

.changeset/orange-items-notice.md

@@ -0,0 +1,12 @@
+---
+'@builder.io/sdk-angular': patch
+'@builder.io/sdk-react-nextjs': patch
+'@builder.io/sdk-qwik': patch
+'@builder.io/sdk-react': patch
+'@builder.io/sdk-react-native': patch
+'@builder.io/sdk-solid': patch
+'@builder.io/sdk-svelte': patch
+'@builder.io/sdk-vue': patch
+---
+
+Fix: Error handling on form submission

packages/sdks-tests/src/e2e-tests/form.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { excludeTestFor, test } from '../helpers/index.js';
+import { excludeGen1, excludeTestFor, test } from '../helpers/index.js';
 
 test.describe('Form', () => {
   test('Form rendering correctly', async ({ page, sdk }) => {
@@ -46,4 +46,52 @@ test.describe('Form', () => {
     await expect(form.locator('select')).toHaveAttribute('required');
     await expect(form.locator('textarea')).toHaveAttribute('required');
   });
+
+  test('form submission', async ({ page, sdk }) => {
+    test.skip(
+      excludeTestFor({ reactNative: true, rsc: true }, sdk),
+      'Form not implemented in React Native and NextJS SDKs.'
+    );
+
+    test.skip(excludeGen1(sdk));
+
+    // Create console listener before clicking submit
+    const consoleMessages: string[] = [];
+    page.on('console', async msg => {
+      // Get all args and convert them to strings
+      const args = await Promise.all(msg.args().map(arg => arg.jsonValue()));
+      const messageText = args.join(' ');
+      consoleMessages.push(messageText);
+    });
+
+    await page.goto('/form');
+
+    const form = page.locator('form');
+    await expect(form).toHaveCount(1);
+
+    const inputs = await form.locator('input').all();
+    await inputs[0].fill('Test Name');
+    await inputs[1].fill('[email protected]');
+    await page.locator('select').selectOption('20-30');
+    await page.locator('textarea').fill('Test message');
+
+    // Submit the form
+    await form.locator('button').click();
+
+    // Wait for any console messages to be processed
+    await page.waitForTimeout(100);
+
+    // Verify error message was logged
+    if (sdk === 'solid') {
+      await expect(page.locator('.builder-text').nth(3)).toHaveText(
+        'SubmissionsToEmail is required when sendSubmissionsTo is set to email'
+      );
+    } else {
+      expect(
+        consoleMessages.some(msg =>
+          msg.includes('SubmissionsToEmail is required when sendSubmissionsTo is set to email')
+        )
+      ).toBeTruthy();
+    }
+  });
 });

packages/sdks/src/blocks/form/form/form.lite.tsx

@@ -187,6 +187,21 @@ export default function FormComponent(props: FormProps) {
 
         state.formState = 'sending';
 
+        if (
+          props.sendSubmissionsTo === 'email' &&
+          (props.sendSubmissionsToEmail === '[email protected]' ||
+            !props.sendSubmissionsToEmail)
+        ) {
+          const message =
+            'SubmissionsToEmail is required when sendSubmissionsTo is set to email';
+          console.error(message);
+          state.formState = 'error';
+          state.mergeNewRootState({
+            formErrorMessage: message,
+          });
+          return;
+        }
+
         const formUrl = `${
           getEnv() === 'dev' ? 'http://localhost:5000' : 'https://builder.io'
         }/api/v1/form-submit?apiKey=${props.builderContext.value.apiKey}&to=${btoa(
@@ -214,21 +229,37 @@ export default function FormComponent(props: FormProps) {
               body = await res.text();
             }
 
-            if (!res.ok && props.errorMessagePath) {
-              /* TODO: allow supplying an error formatter function */
-              let message = get(body, props.errorMessagePath);
+            if (!res.ok) {
+              const submitErrorEvent = new CustomEvent('submit:error', {
+                detail: {
+                  error: body,
+                  status: res.status,
+                },
+              });
 
-              if (message) {
-                if (typeof message !== 'string') {
-                  /* TODO: ideally convert json to yaml so it woul dbe like
-                   error: - email has been taken */
-                  message = JSON.stringify(message);
+              if (formRef?.nativeElement) {
+                formRef?.nativeElement.dispatchEvent(submitErrorEvent);
+                if (submitErrorEvent.defaultPrevented) {
+                  return;
                 }
-                state.formErrorMessage = message;
-                state.mergeNewRootState({
-                  formErrorMessage: message,
-                });
               }
+              state.responseData = body;
+              state.formState = 'error';
+
+              let message = props.errorMessagePath
+                ? get(body, props.errorMessagePath)
+                : body.message || body.error || body;
+
+              if (typeof message !== 'string') {
+                message = JSON.stringify(message);
+              }
+
+              state.formErrorMessage = message;
+              state.mergeNewRootState({
+                formErrorMessage: message,
+              });
+
+              return;
             }
 
             state.responseData = body;