Angular checkbox not submitted

Question

I have an angular form with a checkbox ready to submit.

<form name="productForm" class="form-horizontal" role="form" ng-submit='action(productForm.$valid)' novalidate>
    <div class="form-group">
        <input type='checkbox' name='subtract' data-ng-model='product.subtract'/>
    </div>
</form>

The problem is The default value of this thing in database is 1.

I assume if I don't select the checkbox it will record 0 in the database for me. But somehow this input checkbox is not submitted and the db just takes the defined default value '1'.

Any chance someone know what is happening here? Thanks!

Kalhan · Accepted Answer · 2015-01-06 04:28:46Z

2

seems like you dont initialize the scope variable product.subtract in the controller as,

$scope.product = {};
$scope.product.subtract = 0; //not selected by default

and

<input type='checkbox' name='subtract' data-ng-model='product.subtract' ng-true-value="1" ng-false-value="0" />

ng-true-value & ng-false-value represent the checkbox true false statuses based on checked.

if you do not initialize a scope variable within the controller or using ng-init then there is no scope variable create until you made a change to the ng-model. so here, if u dont have the scope variable, and then you submit the form without ticking the checkbox then there is no scope variable called $scope.product.subtract.

answered Jan 6, 2015 at 4:28

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kalhan Over a year ago

great, glad to help u :)

Anthony · Accepted Answer · 2016-09-08 02:23:58Z

0

Just in addition to this. I"ve noticed that use a boolean on the checkbox can cause issues.

Convert your model into a string (or int) and change the input to be something like this will work

<input type='checkbox' ng-model='mgModel' ng-true-value="'true'" ng-false-value="'false'" />

But if you true to use a straight boolean. You'll find it'll not send the change up to parent controllers etc. So this will fail or cause wired binding issues

<input type='checkbox' ng-model='mgModel' ng-true-value="true" ng-false-value="false" />

So if you're having issues with bind a true/false value. Try changing it to a string or int.

answered Sep 8, 2016 at 2:23

Anthony

3701 gold badge2 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular checkbox not submitted

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related