CODEWITHSUNDEEP
angularjstwitter-bootstraptwitter-bootstrap-3
Patricio S
Patricio S

Reputation: 2130

Checkbox not sending false value

I have a rails application which use AngularJS and I have a problem with a form, the problem is that I want to use a checkbox to send values true or false, but it only send true if it's checked and false if it's checked and unchecked after that, but if the user doesn't touch the checkbox, then it's not even sent as parameter.

  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="car"> Do you have a car?
    </label>
  </div>

What can I do to make it send false if it the user doesn't ever check it?

Edit: The entire form is this, BTW, the form it's about creating a Poll, the car thing was just an example...

<h1>Create Poll</h1>

<form ng-submit="addPoll()" style="margin-top:30px;">

  <div class="form-group">
    <label>Title</label>
    <input type="text" class="form-control" ng-model="title"></input>
  </div>

  <div class="form-group">
    <label>Description</label>
    <textarea type="text" class="form-control" ng-model="description"></textarea>
  </div>

  <br>
  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="allow_anonymous_answer" ng-false-value="false"> Allow anonymous answers
    </label>
  </div>
  <br>

  <div class="form-group">
    <label>Welcome message</label>
    <textarea type="text" class="form-control" ng-model="initial_message"></textarea>
  </div>

  <div class="form-group">
    <label>Outgoing Message</label>
    <textarea type="text" class="form-control" ng-model="final_message"></textarea>
  </div>

  <button type="submit" class="btn btn-primary" style="float: right;">Continue</button>

</form>

When you hit Continue I make HTTP POST request with Restangular to create a Poll, but the problem is that when I don't touch the checkbox this is what I see in the log of Rails...

Started POST "/polls.json" for 127.0.0.1 at 2016-01-26 14:05:57 -0300
Processing by PollsController#create as JSON
  Parameters: {"title"=>"asddddddddddddddda", "description"=>"aaaaaaaaaaaaaaaaaaaaa", "initial_message"=>"asdasdddddddddd", "final_message"=>"aaaaaaaaaaaaaaaaaaad", "poll"=>{"title"=>"asddddddddddddddda", "description"=>"aaaaaaaaaaaaaaaaaaaaa", "initial_message"=>"asdasdddddddddd", "final_message"=>"aaaaaaaaaaaaaaaaaaad"}}

Note that the parameter allow_anonymous_answer doesn't even appear, if I check the checkbox then I can see that the parameter is set as true, if I check it and then uncheck it, then it's set as false, but the problem is when the user doesn't even touch this, when this happens then the parameter is not even shown...

Just in case you wanna see, this is the controller of AngularJS...

angular.module('myapp').controller('CreatePollCtrl', ['$scope', 'Restangular',
function($scope, Restangular) {
  Restangular.setFullResponse(true);

  $scope.addPoll = function() {
    var poll = {title: $scope.title, description: $scope.description, allow_anonymous_answer: $scope.allow_anonymous_answer, initial_message: $scope.initial_message, final_message: $scope.final_message};
    Restangular.all('polls').post(poll).then(function(response) {
    });
  };
}]);

Upvotes: 0

Views: 2194

Answers (4)

Patricio S
Patricio S

Reputation: 2130

I solved it...

In the controller

if ($scope.allow_anonymous_answer == null)
  $scope.allow_anonymous_answer = false

Upvotes: 0

CarlosJavier
CarlosJavier

Reputation: 1045

I think you should put a variable in your controller to achieve the binding between your HTML component and your JS code.

I am currently developing an Angular app, and what i do is to initialize all the ng-model variables in the first lines of my controller, so why dont you give a try to this:

In your first controllers lines:

$scope.allow_anonymous_answer = false;

Upvotes: 1

ragerory
ragerory

Reputation: 1378

Add an ng-click to that checkbox and update the model there. Works fine.

<div class="checkbox">
    <label>
      <input type="checkbox" ng-model="car" ng-click="updateCar(this)">Do you have a car?</input>
    </label>
</div>

In your controller:

var updateCar = function(checkbox) {
    if (checkbox.checked) {
        car = false;
    }
    else {
        car = true;
    }
}

Upvotes: 0

frishi
frishi

Reputation: 882

Did you take a look at angular docs: https://docs.angularjs.org/api/ng/input/input[checkbox]

You can explicitly state what value the checkbox should send when it is not selected using ng-false-value

Upvotes: 0

Related Questions