Merge pull request #197 from CrowdStrike/yield-reset-and-submit

Yield reset and submit actions

Author: ynotdraw

.changeset/empty-carrots-laugh.md

@@ -0,0 +1,24 @@
+---
+'@crowdstrike/ember-toucan-form': patch
+---
+
+The `ToucanForm` component now yields back `submit` and `reset` actions as the functionality was added to `ember-headless-form` [in this PR](https://github.com/CrowdStrike/ember-headless-form/pull/136).
+
+**NOTE:** Calling `submit` directly is **not** required for most cases. The implementation only requires a button tag with the `type="submit"` attribute set.
+
+```hbs
+<ToucanForm as |form|>
+  {{! This should be used for most cases }}
+  <button type='submit'>Submit</button>
+  <button {{on 'click' form.reset}} type='button'>Reset</button>
+</ToucanForm>
+```
+
+However, if you have a more complex case with submission, you can use `form.submit`.
+
+```hbs
+<ToucanForm as |form|>
+  <button {{on 'click' form.submit}} type='button'>Submit</button>
+  <button {{on 'click' form.reset}} type='button'>Reset</button>
+</ToucanForm>
+```

docs/toucan-form/changeset-validation/index.md

@@ -51,3 +51,26 @@ const data: MyFormData = {};
   <form.Input @label='Last name' @name='lastName' />
 </ToucanForm>
 ```
+
+## Submit and Reset Actions
+
+The component yields back `submit` and `reset` actions for more complex cases of submitting or resetting your form data.
+
+**NOTE:** Calling `submit` directly is **not** required for most cases. The implementation only requires a button tag with the `type="submit"` attribute set.
+
+```hbs
+<ToucanForm as |form|>
+  {{! This should be used for most cases }}
+  <button type='submit'>Submit</button>
+  <button {{on 'click' form.reset}} type='button'>Reset</button>
+</ToucanForm>
+```
+
+However, if you have a more complex case with submission, you can use `form.submit`.
+
+```hbs
+<ToucanForm as |form|>
+  <button {{on 'click' form.submit}} type='button'>Submit</button>
+  <button {{on 'click' form.reset}} type='button'>Reset</button>
+</ToucanForm>
+```

docs/toucan-form/native-validation/index.md

@@ -34,3 +34,26 @@ const data: MyFormData = {};
   <form.Input @label='Last name' @name='lastName' />
 </ToucanForm>
 ```
+
+## Submit and Reset Actions
+
+The component yields back `submit` and `reset` actions for more complex cases of submitting or resetting your form data.
+
+**NOTE:** Calling `submit` directly is **not** required for most cases. The implementation only requires a button tag with the `type="submit"` attribute set.
+
+```hbs
+<ToucanForm as |form|>
+  {{! This should be used for most cases }}
+  <button type='submit'>Submit</button>
+  <button {{on 'click' form.reset}} type='button'>Reset</button>
+</ToucanForm>
+```
+
+However, if you have a more complex case with submission, you can use `form.submit`.
+
+```hbs
+<ToucanForm as |form|>
+  <button {{on 'click' form.submit}} type='button'>Submit</button>
+  <button {{on 'click' form.reset}} type='button'>Reset</button>
+</ToucanForm>
+```

packages/ember-toucan-form/src/components/toucan-form.hbs

@@ -30,6 +30,8 @@
       Textarea=(component
         (ensure-safe-component this.TextareaFieldComponent) form=form
       )
+      reset=form.reset
+      submit=form.submit
     )
   }}
 </HeadlessForm>

packages/ember-toucan-form/src/components/toucan-form.ts

@@ -38,6 +38,22 @@ export interface ToucanFormComponentSignature<
           'form'
         >;
         Textarea: WithBoundArgs<typeof TextareaFieldComponent<DATA>, 'form'>;
+
+        /**
+         * Yielded action that will trigger form validation and submission, same as when triggering the native `submit` event on the form.
+         *
+         * View ember-headless-form's documentation for more information.
+         *
+         * Note that calling this directly is **not** required for most cases. The implementation only requires a button tag with the `type="submit"` attribute set; however, this is exposed for more complex cases.
+         */
+        submit: () => void;
+
+        /**
+         * Yielded action that will reset form state, same as when triggering the native `reset` event on the form.
+         *
+         * View ember-headless-form's documentation for more information.
+         */
+        reset: () => void;
       }
     ];
   };

pnpm-lock.yaml

@@ -56,6 +56,7 @@
     "@types/ember__destroyable": "^4.0.1",
     "@types/ember__engine": "^4.0.4",
     "@types/ember__error": "^4.0.2",
+    "@types/ember__modifier": "^4.0.3",
     "@types/ember__object": "^4.0.5",
     "@types/ember__polyfills": "^4.0.1",
     "@types/ember__routing": "^4.0.12",
@@ -89,8 +90,8 @@
     "ember-load-initializers": "^2.1.2",
     "ember-qunit": "^7.0.0",
     "ember-resolver": "^10.0.0",
-    "ember-source-channel-url": "^3.0.0",
     "ember-source": "~5.1.0",
+    "ember-source-channel-url": "^3.0.0",
     "ember-template-imports": "^3.1.2",
     "ember-template-lint": "^5.8.0",
     "ember-try": "^2.0.0",