fix: better errors

withastro-utils · Dec 4, 2023 · b415f40 · b415f40
1 parent ead9f54
commit b415f40
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 8 deletions.
diff --git a/examples/simple-form/src/pages/button.astro b/examples/simple-form/src/pages/button.astro
@@ -0,0 +1,28 @@
+---
+import {BButton, BindForm} from '@astro-utils/forms/forms.js';
+import 'bootstrap/dist/css/bootstrap.css';
+import {Button} from 'reactstrap';
+import Layout from '../layouts/Layout.astro';
+
+
+let showSubmitText: string;
+
+function formSubmit() {
+    Astro.locals.session.counter ??= 0;
+    Astro.locals.session.counter++;
+    showSubmitText = `You clicked ${Astro.locals.session.counter} times`;
+}
+---
+<Layout title="Welcome to Astro Metro.">
+    <BindForm>
+        <BindForm>
+            <BButton as={Button} props={{color: 'info'}} onClick={formSubmit}>Submit</BButton>
+            {showSubmitText}
+        </BindForm>
+
+        <BindForm>
+            {showSubmitText}
+        </BindForm>
+    </BindForm>
+
+</Layout>
diff --git a/examples/simple-form/src/pages/index.astro b/examples/simple-form/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import {BButton, Bind, BindForm, BInput} from '@astro-utils/forms/forms.js';
+import {BButton, Bind, BindForm, BInput, FormErrors} from '@astro-utils/forms/forms.js';
 import {Button} from 'reactstrap';
 import 'bootstrap/dist/css/bootstrap.css';
 
@@ -16,7 +16,9 @@ function formSubmit(){
 ---
 <Layout title="Welcome to Astro Metro.">
     <BindForm bind={form}>
+        <FormErrors/>
         {showSubmitText}
+
         {Astro.locals.session.counter &&
                 <p>You have submitted {Astro.locals.session.counter} times.</p>
         }

diff --git a/packages/forms/components/form/BButton.astro b/packages/forms/components/form/BButton.astro
@@ -14,16 +14,19 @@ export interface Props<T extends keyof JSX.IntrinsicElements | React.JSXElementC
 const {as: asComponent = 'button', props: componentProps, onClick, whenFormOK, connectId = createUniqueContinuanceName(onClick), ...props} = Astro.props;
 const {bind, executeAfter} = getContext(Astro, '@astro-utils/forms');
 
-const checkFormValidation = whenFormOK && !bind?.errors.length || !whenFormOK;
-
-if (isPost(Astro) && await validateAction(Astro, 'button-callback', connectId) && checkFormValidation) {
-    if (executeAfter) {
-        executeAfter.push(onClick);
-    } else {
-        await onClick();
+async function executeFormAction(callback = onClick) {
+    const checkFormValidation = whenFormOK && !bind?.errors.length || !whenFormOK;
+    if (isPost(Astro) && await validateAction(Astro, 'button-callback', connectId) && checkFormValidation) {
+        await callback();
     }
 }
 
+if (executeAfter) {
+    executeAfter.push(executeFormAction);
+} else {
+    throw new Error('Use BButton inside a BindForm component');
+}
+
 const Component = asComponent as any;
 ---
 <Component type="submit" name="button-callback" value={connectId} {...props} {...componentProps}>