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

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

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!

Solution

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?