diff --git a/addon/components/bs-form.js b/addon/components/bs-form.js
index 5911f18c3..599aebb2b 100644
--- a/addon/components/bs-form.js
+++ b/addon/components/bs-form.js
@@ -16,11 +16,11 @@ const {
You can use whatever markup you like within the form:
```handlebars
- {{#bs-form action="submit"}}
- {{#bs-form-group validation=firstNameValidation}}
+ {{#bs-form onSubmit=(action "submit") as |form|}}
+ {{#form.group validation=firstNameValidation}}
- {{/bs-form-group}}
+ {{/form.group}}
{{/bs-form}}
```
@@ -29,11 +29,11 @@ const {
### Submitting the form
- When the form is submitted (e.g. by clicking a submit button), the event will be intercepted and the default action
- will be sent to the controller.
- In case the form supports validation (see "Form validation" below), the "before" action is called (which allows you to
- do e.g. model data normalization), then the available validation rules are evaluated, and if those fail, the "invalid"
- action is sent instead of the default "action".
+ When the form is submitted (e.g. by clicking a submit button), the event will be intercepted and the `onSubmit` action
+ will be sent to the controller or parent component.
+ In case the form supports validation (see "Form validation" below), the `onBefore` action is called (which allows you to
+ do e.g. model data normalization), then the available validation rules are evaluated, and if those fail, the `onInvalid`
+ action is sent instead of `onSubmit`.
### Use with Components.FormElement
@@ -44,7 +44,7 @@ const {
with an invalid validation, or when focusing out of invalid inputs
```handlebars
- {{#bs-form formLayout="horizontal" model=this action="submit" as |form|}}
+ {{#bs-form formLayout="horizontal" model=this onSubmit=(action "submit") as |form|}}
{{form.element controlType="email" label="Email" placeholder="Email" property="email"}}
{{form.element controlType="password" label="Password" placeholder="Password" property="password"}}
{{form.element controlType="checkbox" label="Remember me" property="rememberMe"}}
diff --git a/addon/components/bs-form/element.js b/addon/components/bs-form/element.js
index f4d9c0615..300157225 100644
--- a/addon/components/bs-form/element.js
+++ b/addon/components/bs-form/element.js
@@ -1,6 +1,6 @@
import Ember from 'ember';
import layout from '../../templates/components/bs-form/element';
-import FormGroup from 'ember-bootstrap/components/bs-form-group';
+import FormGroup from './group';
const {
computed,
diff --git a/addon/components/bs-form-group.js b/addon/components/bs-form/group.js
similarity index 94%
rename from addon/components/bs-form-group.js
rename to addon/components/bs-form/group.js
index d93398e55..02ed1c3f3 100644
--- a/addon/components/bs-form-group.js
+++ b/addon/components/bs-form/group.js
@@ -1,5 +1,5 @@
import Ember from 'ember';
-import layout from '../templates/components/bs-form-group';
+import layout from '../../templates/components/bs-form/group';
import Config from 'ember-bootstrap/config';
const { computed } = Ember;
@@ -9,10 +9,12 @@ const { computed } = Ember;
Use as a block level component:
```hbs
- {{#bs-form-group validation=firstNameValidation}}
-
-
- {{/bs-form-group}}
+ {{#bs-form as |form|}}
+ {{#form.group validation=firstNameValidation}}
+
+
+ {{/form.group}}
+ {{/bs-form}}
```
If the `validation` property is set to some state (usually Bootstrap's predefined states "success",
diff --git a/addon/templates/components/bs-form.hbs b/addon/templates/components/bs-form.hbs
index eacae190c..7995db13f 100644
--- a/addon/templates/components/bs-form.hbs
+++ b/addon/templates/components/bs-form.hbs
@@ -7,5 +7,6 @@
showAllValidations=showAllValidations
onChange=(action "change")
)
+ group=(component "bs-form/group")
)
}}
\ No newline at end of file
diff --git a/addon/templates/components/bs-form-group.hbs b/addon/templates/components/bs-form/group.hbs
similarity index 100%
rename from addon/templates/components/bs-form-group.hbs
rename to addon/templates/components/bs-form/group.hbs
diff --git a/app/components/bs-form-group.js b/app/components/bs-form-group.js
deleted file mode 100644
index 0f4b87b49..000000000
--- a/app/components/bs-form-group.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default } from 'ember-bootstrap/components/bs-form-group';
-
-
diff --git a/app/components/bs-form/group.js b/app/components/bs-form/group.js
new file mode 100644
index 000000000..885b504b3
--- /dev/null
+++ b/app/components/bs-form/group.js
@@ -0,0 +1,3 @@
+export { default } from 'ember-bootstrap/components/bs-form/group';
+
+
diff --git a/tests/integration/components/bs-form-group-test.js b/tests/integration/components/bs-form/group-test.js
similarity index 88%
rename from tests/integration/components/bs-form-group-test.js
rename to tests/integration/components/bs-form/group-test.js
index 978f1b762..6543fbdc5 100644
--- a/tests/integration/components/bs-form-group-test.js
+++ b/tests/integration/components/bs-form/group-test.js
@@ -1,12 +1,12 @@
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
-moduleForComponent('bs-form-group', 'Integration | Component | bs-form-group', {
+moduleForComponent('bs-form/group', 'Integration | Component | bs-form/group', {
integration: true
});
test('component has form-group bootstrap class', function(assert) {
- this.render(hbs`{{#bs-form-group}}{{/bs-form-group}}`);
+ this.render(hbs`{{#bs-form/group}}{{/bs-form/group}}`);
assert.equal(this.$(':first-child').hasClass('form-group'), true, 'component has form-group class');
});
@@ -27,7 +27,7 @@ const validations = {
function testValidationState(assert, state) {
let validationConfig = validations[state];
- this.render(hbs`{{#bs-form-group validation=validation}}{{/bs-form-group}}`);
+ this.render(hbs`{{#bs-form/group validation=validation}}{{/bs-form/group}}`);
this.set('validation', state);
validationConfig.formGroupClasses.forEach((className) => {
assert.equal(this.$(':first-child').hasClass(className), true, `component has ${className} class`);