ember-bootstrap errors when rendering a form

Question

I have a problem using ember-bootstrap to render a form. When the route is visited nothing is rendered and in the console the message

appears.

The project is a Bootstrap 3 project and I have just installed ember-boostrap. To do that I did the following :

ember install ember-bootstrap
ember generate ember-bootstrap --preprocessor=sass
ember generate ember-bootstrap --bootstrap-version=3

From reading the doco I believe that was the correct sequence of commands ?

I then created a new route and in the template I put the following :

{{#bs-form formLayout=formLayout model=this onSubmit=(action "submit") as |form|}}
            {{form.element controlType="email" label="Email" placeholder="Email" property="email" required=true}}
            {{form.element controlType="password" label="Password" placeholder="Password" property="password" required=true helpText="Minimum 6 characters"}}
            {{form.element controlType="radio" label="Radio" property="radio" options=radioOptions optionLabelPath="label"}}
            {{form.element controlType="checkbox" label="Checkbox" property="checkbox"}}
            {{form.element controlType="textarea" label="Textarea" property="textarea"}}
            {{bs-button defaultText="Submit" type="primary" buttonType="submit"}}
          {{/bs-form}}
{{outlet}}

Which is the sample template from the form component in the ember-bootstrap doco .

As I said when I go to visit the the new route I get nothing rendered and the error message shown above.

I feel like I must have overlooked some part of the directions ... is there something obviously missing ?

---

EDIT IN RESPONSE TO ANSWER FROM REAL_ATE

So to respond to the points raised by by Chris (real_ate) below. I'm using Ember 3.8 .

Now I was really pleased to feature on the excellent "May I Ask A Question" and I hadn't yet watched this weeks so I went off to watch. It seemed really odd that you were getting a different error than I was so I decided to start a new project and attempt my own reconstruction.

What I found was that I got exactly the error you saw (others can view that segment of the vid here) and not the one I had shown the screen shot of.

So I'm pretty puzzled about this but it does confirm your finding.

My best guess is this ... at about the same time I had been working through some issues with another addon and to document the process I had taken some screen dumps of those errors. I believe I may have picked the wrong screen dump and pasted it into the question. Oddly enough Chris mentioned something at the start of the segment about me not having actually copied the stacktrace but instead having used a screen shot of the stacktrace - perhaps if I'd actually copied the stacktrace I would have been less likely to do what, it seems likely, I did.

So ... for the sake of posterity the initial error was ...

Uncaught Error: Assertion Failed: An action named 'submit' was not found in <est@controller:login::ember231>
    at assert (index.js:163)
    at makeClosureAction (glimmer.js:6069)
    at action (glimmer.js:5995)
    at Object.evaluate (runtime.js:266)
    at AppendOpcodes.evaluate (runtime.js:72)
    at LowLevelVM.evaluateSyscall (runtime.js:3471)
    at LowLevelVM.evaluateInner (runtime.js:3417)
    at LowLevelVM.evaluateOuter (runtime.js:3409)
    at VM.next (runtime.js:5530)
    at TemplateIteratorImpl.next (runtime.js:5632)

Which was resolved by providing a 'submit' action on a controller created for the purpose and that then revealed a different issue with the example .hbs from ember-bootstrap including formLayout=formLayout which doesn't exist unless you've defined it and the error for that looks like this ...

Uncaught Error: Assertion Failed: must provide a valid `formLayout` attribute.
    at Object.assert (index.js:163)
    at Class.<anonymous> (bs-form.js:11)
    at ComputedProperty.get (metal.js:2966)
    at _get (metal.js:1591)
    at RootPropertyReference.compute (glimmer.js:535)
    at RootPropertyReference.value (glimmer.js:384)
    at SimpleClassNameBindingReference.compute (glimmer.js:4002)
    at SimpleClassNameBindingReference.value (reference.js:367)
    at ClassListReference.value (runtime.js:1283)
    at ComponentElementOperations.flush (runtime.js:1645)

... that was resolved as I described in my answer below .

So thanks to Chris and Jen and sorry for the misleading question .

Answer 1

Well I'm going to answer this myself for the sake of others who might have the same issue. I got some help from the add-on maintainer via the Emberjs discord and to quote him ...

The examples on ember-bootstrap.com are unfortunately not very smart, in that they show bounded properties as such and not with the actual value. For example that formLayout=formLayout only makes sense if you also have a formLayout property on your controller. If that's not the case (which I assume), formLayout will be undefined. Can you try removing that and see if it helps? (or replace with a constant value like formLayout="horizontal")

I did what he suggested and it resolved the problem.