First implementation

Author: simonihmig

.gitignore

@@ -5,6 +5,7 @@ dist/
 
 # dependencies
 node_modules/
+.yalc
 
 # misc
 /.env*

packages/ember-bootstrap-constraint-validations/src/components/bs-form.js

@@ -1,4 +1,5 @@
 import BaseBsForm from 'ember-bootstrap/components/bs-form';
+import { assert } from '@ember/debug';
 
 export default class BsForm extends BaseBsForm {
   '__ember-bootstrap_subclass' = true;
@@ -7,7 +8,11 @@ export default class BsForm extends BaseBsForm {
     return true;
   }
 
-  async validate(model) {
-    throw new Error();
+  async validate(model, form) {
+    assert('Expected to receive the form element when validating.', form instanceof HTMLFormElement);
+
+    if (!form.checkValidity()) {
+      throw new Error();
+    }
   }
 }

packages/ember-bootstrap-constraint-validations/src/components/bs-form/element.js

@@ -1,15 +1,31 @@
 import BaseBsFormElement from 'ember-bootstrap/components/bs-form/element';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export default class BsFormElement extends BaseBsFormElement {
   '__ember-bootstrap_subclass' = true;
 
-  get errors() {
-    // let { model, property } = this.args;
-
-    return ['dummy error'];
+  get controlElement() {
+    return document.getElementById(this.formElementId);
   }
 
+  @tracked
+  errors = [];
+
   get hasValidator() {
     return true;
   }
+
+  @action
+  showValidationOnHandler(...args) {
+    this._updateErrors();
+    super.showValidationOnHandler(...args);
+  }
+
+  _updateErrors() {
+    let { controlElement } = this;
+    this.errors = controlElement.validity.valid
+      ? []
+      : [controlElement.validationMessage];
+  }
 }

packages/test-app/app/templates/application.hbs

@@ -1,8 +1,10 @@
 <div class="container mt-4">
 
   <BsForm @model={{this.model}} @onSubmit={{this.submit}} @onInvalid={{this.invalid}} as |form|>
-    <form.element @label="Name" @property="name" />
-    <form.element @label="Email" @property="email" />
+    <form.element @label="Name" @property="name" as |el|>
+      <el.control required/>
+    </form.element>
+    <form.element @controlType="email" @label="Email" @property="email" />
     <form.submitButton>Submit</form.submitButton>
   </BsForm>