Issue with the checkbox from form.element in Bootstrap for Ember.js

Question

I have some problem understanding how the checkbox in form.element work. Specifically, I don't understand how to refresh my form result when I click on a chekckbox. It is defined here: Ember-bootstrap doc about form.element

My templates looks like that: Templates with checkbox

The handlebars code is:

{{#bs-form formLayout="horizontal" model=this as | form |}}

  <div class="row">
    <div class="col-md-3">
      {{form.element label=(t 'audit.enable_wsapicall')
                        disabled=fetchingData controlType='checkbox'
                        value=wsapicallEnabled}}
    </div>
    <div class="col-md-3">
      {{form.element label=(t 'audit.enable_userevent')
                        disabled=fetchingData controlType='checkbox'
                        value=userEventEnabled}}
    </div>
    <div class="col-md-3">
      {{form.element label=(t 'audit.enable_doorevent')
                        disabled=fetchingData controlType='checkbox'
                        value=doorEventEnabled}}
    </div>
    <div class="col-md-3">
      {{form.element label=(t 'audit.enable_groupevent')
                        disabled=fetchingData controlType='checkbox'
                        value=groupEventEnabled}}
    </div>
  </div>

  <div class="row">
    <div class="col-md-3">
      {{form.element label=(t 'audit.enable_credentialevent')
                        disabled=fetchingData controlType='checkbox'
                        value=credentialEventEnabled}}
    </div>
    <div class="col-md-3">
      {{form.element label=(t 'audit.enable_scheduleevent')
                        disabled=fetchingData controlType='checkbox'
                        value=scheduleEventEnabled}}
    </div>
    <div class="col-md-3">
      {{form.element label=(t 'audit.enable_usergroupevent')
                        disabled=fetchingData controlType='checkbox'
                        value=userGroupMembershipEventEnabled}}
    </div>
    <div class="col-md-3">
      {{form.element label=(t 'audit.enable_updateevent')
                        disabled=fetchingData controlType='checkbox'
                        value=updateEventEnabled}}
    </div>
    <div class="col-md-3">
      {{form.element label=(t 'audit.enable_zoneevent')
                        disabled=fetchingData controlType='checkbox'
                        value=zoneEventEnabled}}
    </div>
  </div>
{{/bs-form}}

I have an error that I don't understand when I click on a checkbox. This is the error:
Assertion Failed: You cannot use the form element's default onChange action for form elements if not using a model or setting the value directly on a form element. You must add your own onChange action to the form element in this case!

The onChange action that it refers to is probably a refreshing action. I tried with one that I made, but it doesn't seem to work for me.

So I'm asking you if you can hep me understanding the checkbox from form.element for the bootstrap module of Ember.js.

Thank you for your time and attention!

score 1 · Answer 1 · answered Oct 30 '17 at 23:59

1

I had the same issue and I fixed it by setting the form model and setting the property value for each element. See an example here:

http://www.ember-bootstrap.com/api/classes/Components.Form.html

answered Oct 30 '17 at 23:59

R. Javier Vega

11
1

score 0 · Accepted Answer · answered Jul 21 '17 at 01:19

0

Looks like that error is telling you that you need to set a value for those checkbox elements. Are the variables you are passing to the form defined somewhere?

answered Jul 21 '17 at 01:19

IAMZERG

100
9

Yes every variable is initialized with the value true. When I tried to do an **console.log(this.get('wsapicallEnabled'));** in my code, the value is initilized with true, but when I tried to click on the checkbox, the error message pop. And the value is still initialized true. – maje Jul 21 '17 at 07:48
1

I had an issue with the way I was colling the form.element. I changed the check box from: **{{form.element label=(t 'audit.enable_userevent') disabled=fetchingData controlType='checkbox' value=userEventEnabled}}** to: **{{form.element label=(t 'audit.enable_userevent') disabled=fetchingData controlType='checkbox' property="userEventEnabled"}}** – maje Jul 21 '17 at 12:35

Issue with the checkbox from form.element in Bootstrap for Ember.js

2 Answers2