Yield submit and reset actions

.changeset/early-colts-attend.md

@@ -0,0 +1,7 @@
+---
+'ember-headless-form': patch
+---
+
+Yield `submit` and `reset` actions
+
+`<HeadlessForm>` yields `submit` and `reset` actions, that can be used in place of the native buttons.

packages/ember-headless-form/src/components/headless-form.gts

@@ -126,6 +126,16 @@ export interface HeadlessFormComponentSignature<
          * An ErrorRecord, for custom rendering of error output
          */
         rawErrors?: ErrorRecord<DATA>;
+
+        /**
+         * Yielded action that will trigger form validation and submission, same as when triggering the native `submit` event on the form.
+         */
+        submit: () => void;
+
+        /**
+         * Yielded action that will reset form state, same as when triggering the native `reset` event on the form.
+         */
+        reset: () => void;
       }
     ];
   };
@@ -440,8 +450,8 @@ export default class HeadlessFormComponent<
   }
 
   @action
-  async onSubmit(e: Event): Promise<void> {
-    e.preventDefault();
+  async onSubmit(e?: Event): Promise<void> {
+    e?.preventDefault();
 
     await this._validate();
     this.showAllValidations = true;
@@ -463,8 +473,8 @@ export default class HeadlessFormComponent<
   }
 
   @action
-  async onReset(e: Event): Promise<void> {
-    e.preventDefault();
+  async onReset(e?: Event): Promise<void> {
+    e?.preventDefault();
 
     for (const key of Object.keys(this.internalData)) {
       delete this.internalData[key as keyof DATA];
@@ -598,6 +608,8 @@ export default class HeadlessFormComponent<
           submissionState=this.submissionState
           isInvalid=this.hasValidationErrors
           rawErrors=this.visibleErrors
+          submit=this.onSubmit
+          reset=this.onReset
         )
       }}
     </form>

test-app/tests/integration/components/headless-form-data-test.gts

@@ -355,6 +355,48 @@ module('Integration Component HeadlessForm > Data', function (hooks) {
       );
     });
 
+    test('submit action is yielded', async function (assert) {
+      const data = {
+        firstName: 'Tony',
+        lastName: 'Ward',
+      };
+      const submitHandler = sinon.spy();
+
+      await render(<template>
+        <HeadlessForm @data={{data}} @onSubmit={{submitHandler}} as |form|>
+          <form.Field @name="firstName" as |field|>
+            <field.Label>First Name</field.Label>
+            <field.Input data-test-first-name />
+          </form.Field>
+          <form.Field @name="lastName" as |field|>
+            <field.Label>Last Name</field.Label>
+            <field.Input data-test-last-name />
+          </form.Field>
+          <button
+            type="button"
+            data-test-submit
+            {{on "click" form.submit}}
+          >Submit</button>
+        </HeadlessForm>
+      </template>);
+
+      assert.dom('input[data-test-first-name]').hasValue('Tony');
+      assert.dom('input[data-test-last-name]').hasValue('Ward');
+
+      await fillIn('input[data-test-first-name]', 'Nicole');
+      await fillIn('input[data-test-last-name]', 'Chung');
+
+      await click('[data-test-submit]');
+
+      assert.true(
+        submitHandler.calledWith({
+          firstName: 'Nicole',
+          lastName: 'Chung',
+        }),
+        'new data is passed to submit handler'
+      );
+    });
+
     test('setValue yielded from field sets internal value', async function (assert) {
       const data = { firstName: 'Tony' };
 

test-app/tests/integration/components/headless-form-reset-test.gts

@@ -6,6 +6,7 @@ import { module, test } from 'qunit';
 
 import { HeadlessForm } from 'ember-headless-form';
 import { setupRenderingTest } from 'test-app/tests/helpers';
+import { on } from '@ember/modifier';
 
 interface TestFormData {
   firstName?: string;
@@ -153,4 +154,159 @@ module('Integration Component HeadlessForm > Reset', function (hooks) {
         .doesNotExist('form.submissionState is resetted');
     });
   });
+
+  module('reset action', function () {
+    test('dirty fields are resetted', async function (assert) {
+      const data: TestFormData = { firstName: 'Tony', lastName: 'Ward' };
+
+      await render(<template>
+        <HeadlessForm @data={{data}} as |form|>
+          <form.Field @name="firstName" as |field|>
+            <field.Label>First Name</field.Label>
+            <field.Input data-test-first-name />
+          </form.Field>
+          <form.Field @name="lastName" as |field|>
+            <field.Label>Last Name</field.Label>
+            <field.Input data-test-last-name />
+          </form.Field>
+          <button
+            type="button"
+            {{on "click" form.reset}}
+            data-test-reset
+          >Reset</button>
+        </HeadlessForm>
+      </template>);
+
+      await fillIn('[data-test-first-name]', 'Nicole');
+      await click('[data-test-reset]');
+
+      assert.dom('[data-test-first-name]').hasValue('Tony');
+      assert.dom('[data-test-last-name]').hasValue('Ward');
+    });
+
+    test('validation errors are cleared', async function (assert) {
+      const data: TestFormData = {};
+
+      await render(<template>
+        <HeadlessForm @data={{data}} as |form|>
+          <form.Field @name="firstName" as |field|>
+            <field.Label>First Name</field.Label>
+            <field.Input required data-test-first-name />
+            <field.Errors data-test-first-name-errors />
+            {{#if field.isInvalid}}
+              <div data-test-invalid />
+            {{/if}}
+          </form.Field>
+          <form.Field @name="lastName" as |field|>
+            <field.Label>Last Name</field.Label>
+            <field.Input data-test-last-name />
+            <field.Errors data-test-last-name-errors />
+          </form.Field>
+          <button type="submit" data-test-submit>Submit</button>
+          <button
+            type="button"
+            {{on "click" form.reset}}
+            data-test-reset
+          >Reset</button>
+        </HeadlessForm>
+      </template>);
+
+      await click('[data-test-submit]');
+
+      assert
+        .dom('[data-test-first-name-errors]')
+        .exists({ count: 1 }, 'validation errors appear when validation fails');
+      assert.dom('[data-test-first-name]').hasAria('invalid', 'true');
+      assert.dom('[data-test-invalid]').exists();
+
+      await click('[data-test-reset]');
+
+      assert
+        .dom('[data-test-first-name-errors]')
+        .doesNotExist('validation errors are removed on reset');
+      assert.dom('[data-test-first-name]').doesNotHaveAria('invalid');
+      assert.dom('[data-test-invalid]').doesNotExist();
+    });
+
+    test('validation state is resetted', async function (assert) {
+      const data: TestFormData = {};
+
+      await render(<template>
+        <HeadlessForm @data={{data}} as |form|>
+          <form.Field @name="firstName" as |field|>
+            <field.Label>First Name</field.Label>
+            <field.Input required data-test-first-name />
+          </form.Field>
+          <button type="submit" data-test-submit>Submit</button>
+          <button
+            type="button"
+            {{on "click" form.reset}}
+            data-test-reset
+          >Reset</button>
+          {{#if form.validationState}}
+            <div data-test-validation-state>{{form.validationState.state}}</div>
+          {{/if}}
+        </HeadlessForm>
+      </template>);
+
+      assert
+        .dom('[data-test-validation-state]')
+        .doesNotExist(
+          'form.validationState is not present until first validation'
+        );
+
+      await click('[data-test-submit]');
+
+      assert
+        .dom('[data-test-validation-state]')
+        .hasText('RESOLVED', 'form.validationState has resolved');
+
+      await click('[data-test-reset]');
+
+      assert
+        .dom('[data-test-validation-state]')
+        .doesNotExist('form.validationState is resetted');
+    });
+
+    test('submission state is resetted', async function (assert) {
+      const data: TestFormData = {};
+      const submitHandler = () => 'ok';
+
+      await render(<template>
+        <HeadlessForm @data={{data}} @onSubmit={{submitHandler}} as |form|>
+          <form.Field @name="firstName" as |field|>
+            <field.Label>First Name</field.Label>
+            <field.Input data-test-first-name />
+          </form.Field>
+          <button type="submit" data-test-submit>Submit</button>
+          <button
+            type="button"
+            {{on "click" form.reset}}
+            data-test-reset
+          >Reset</button>
+          {{#if form.submissionState}}
+            <div data-test-submission-state>{{form.submissionState.state}}</div>
+          {{/if}}
+        </HeadlessForm>
+      </template>);
+
+      assert
+        .dom('[data-test-submission-state]')
+        .doesNotExist(
+          'form.submissionState is not present until first validation'
+        );
+
+      await click('[data-test-submit]');
+
+      assert
+        .dom('[data-test-submission-state]')
+        .hasText('RESOLVED', 'form.submissionState has resolved');
+
+      await click('[data-test-reset]');
+
+      assert
+        .dom('[data-test-submission-state]')
+        .doesNotExist('form.submissionState is resetted');
+    });
+  });
 });