Add form element to arguments passed to (private) validate hook

addon/components/bs-form.hbs

@@ -5,6 +5,7 @@
   ...attributes
   {{on "keypress" this.handleKeyPress}}
   {{on "submit" this.handleSubmit}}
+  {{create-ref "formElement"}}
 >
   {{yield
     (hash

addon/components/bs-form.js

@@ -9,6 +9,7 @@ import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 import arg from '../utils/decorators/arg';
 import { tracked } from '@glimmer/tracking';
 import { cached } from 'tracked-toolbox';
+import { ref } from 'ember-ref-bucket';
 
 /**
   Render a form with the appropriate Bootstrap layout class (see `formLayout`).
@@ -118,6 +119,13 @@ import { cached } from 'tracked-toolbox';
 */
 @deprecateSubclassing
 export default class Form extends Component {
+  /**
+   * @property _element
+   * @type null | HTMLFormElement
+   * @private
+   */
+  @ref('formElement') _element = null;
+
   /**
    * Bootstrap form class name (computed)
    *
@@ -332,10 +340,11 @@ export default class Form extends Component {
    *
    * @method validate
    * @param {Object} model
+   * @param {HTMLFormElement} form
    * @return {Promise}
    * @public
    */
-  validate(model) {} // eslint-disable-line no-unused-vars
+  validate(model, form) {} // eslint-disable-line no-unused-vars
 
   /**
    * @property showAllValidations
@@ -400,7 +409,7 @@ export default class Form extends Component {
 
     return RSVP.resolve()
       .then(() => {
-        return this.hasValidator ? this.validate(model) : null;
+        return this.hasValidator ? this.validate(model, this._element) : null;
       })
       .then(
         (record) => {

tests/integration/components/bs-form-test.js

@@ -152,6 +152,64 @@ module('Integration | Component | bs-form', function (hooks) {
     assert.verifySteps(['bubbles']);
   });
 
+  test('form that supports validation calls validate hook when submitting', async function (assert) {
+    let model = {};
+    this.set('model', model);
+
+    class ValidatingForm extends Form {
+      '__ember-bootstrap_subclass' = true;
+
+      get hasValidator() {
+        return true;
+      }
+
+      async validate(modelArg, formArg) {
+        assert.step('validate');
+        assert.strictEqual(modelArg, model, 'validate is called with model argument');
+        assert.ok(formArg instanceof HTMLFormElement, 'validate is called with form argument');
+      }
+    }
+
+    this.set('form', ensureSafeComponent(ValidatingForm, this));
+
+    await render(hbs`
+      <this.form @model={{this.model}}>Test</this.form>
+    `);
+    await triggerEvent('form', 'submit');
+
+    assert.verifySteps(['validate'], 'validate has been called');
+  });
+
+  test('form that supports validation calls validate hook when calling submit action', async function (assert) {
+    let model = {};
+    this.set('model', model);
+
+    class ValidatingForm extends Form {
+      '__ember-bootstrap_subclass' = true;
+
+      get hasValidator() {
+        return true;
+      }
+
+      async validate(modelArg, formArg) {
+        assert.step('validate');
+        assert.strictEqual(modelArg, model, 'validate is called with model argument');
+        assert.ok(formArg instanceof HTMLFormElement, 'validate is called with form argument');
+      }
+    }
+
+    this.set('form', ensureSafeComponent(ValidatingForm, this));
+
+    await render(hbs`
+      <this.form @model={{this.model}} as |form|>
+        <button type="button" {{on "click" form.submit}}>Submit</button>
+      </this.form>
+    `);
+    await click('button');
+
+    assert.verifySteps(['validate'], 'validate has been called');
+  });
+
   test('Submitting the form with valid validation calls onBeforeSubmit and onSubmit action', async function (assert) {
     let submit = sinon.spy();
     let before = sinon.spy();