Material: checkbox: not submitting form value

[cmelone]

Actual behavior:

• What is the issue? When I check a <md-checkbox> and submit the form to serialize it to JSON on the same page, it does not show a true or false value. When I create a normal <input type="checkbox">, it submits the form value normally.
• What is the expected behavior? That when I check the <md-checkbox> and submit the form, it should show whether or not I actually selected the checkbox or not

CodePen or Steps to reproduce the issue: *

• CodePen Demo which shows your issue : http://codepen.io/cmelone/pen/GZLeLp

Angular Versions:

• Angular Version: 1.5.6
• Angular Material Version: 1.0.8

Additional Information:

• Browser Type: Chrome
• Browser Version: 50.0.2661.102
• OS: El Capitan

[bolerodan]

So from what I can see, the md-checkbox component is actually not a standard html checkbox. If you look at the markup, you can see this.

The other issue, is that you're using methods outside of Angular to attempt to grab values. Since the checkbox component is assigning its value to Angulars scope, you're not going to get any value through this way without some extra work.

Following the examples, they set default values on scope for check boxes. I would re write this way to take full advantage of angular, and use ng-submit, and a submit function in your controller, to access $scope.data to submit with $http

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

[colmben]

You can work around this by linking a hidden input element via an ng-model attribute. For example this is from a rails/ERB created form that I wanted to use the look and feel of the md-checkbox element for :

    <% @service_options.each do |service| %>
        <input type="checkbox"
               name="client[services][]"
               value="<%= service['id'] %>"
               ng-model="<%= 'service' + service['id'].to_s + 'selected' %>"
               visibility: hidden>
        <md-checkbox
          id=" <%= 'services' + service['id'].to_s %>"
          name="client[services][]"
          value="<%= service['id'] %>"
          ng-model=" <%= 'service' + service['id'].to_s + 'selected' %>">
          <%= service['text'] %>
        </md-checkbox>

    <% end %>

[mahmoudajawad]

@colmben, your solution should have been the default behaviour. i don't understand why this issue was ruled away while the solution is as easy as manipulating the markup to include a hidden input as you suggested.

[Splaktar]

@AjawadMahmoud that was done in Angular Material.

We haven't explored how much of a breaking change that would be for AngularJS Material, but if someone from the community wanted to investigate and post a PR, we would certainly be interested in taking a look at it.