Angularjs checkbox checked by default on load not working inside a form with ng-true-value

Question

I know there are similar questions, but this checkbox is inside a form. How to check the checkbox "subscribe" by default on load?

Here is part of my HTML:

    <div ng-app="app9" ng-cloak>    
        <div ng-controller="userCtrl">
            <form name="userForm" ng-submit="saveUser(userInfo)">
                <label>First Name :</label>
                <input type="text" name="fname" ng-model="userInfo.fName"/>   
                <br />    
                <label>Last Name :</label>
                <input type="text" name="lname" ng-model="userInfo.lName"/>  
                <br />    
                <label>Street :</label>
                <input type="text" name="street" ng-model="userInfo.street"/>
                <br />    
                <label>Subscribe :</label>
                <input type="checkbox" name="subscribe" ng-model="userInfo.subscribe" />    
                <br />    
                <label>Delivery Method :</label>
                <select name="delivery" ng-model="userInfo.delivery" ng-required="true" >
                    <option value="Email">Email</option>
                    <option value="Mail">Mail</option>
                </select>

                <br /><br />

                <input type="submit" value="Save" ng-disabled="userForm.$invalid"/>

                <ul>
                    <li ng-repeat="item in user">
                        {{'User: ' + item.fName + ' ' + item.lName + ' ' + item.street + ' ' + item.subscribe + ' ' + item.delivery}}
                    </li>
                </ul>
            </form>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
    <script src="js/exam9.js"></script>
</body>

Here is my Javascript exam9.js:

var app9 = angular.module('app9', []);
app9.controller('userCtrl', function ($scope) {        
    userInfo.subscribe = true;
    $scope.saveUser = function (userInfo) {
        if ($scope.userForm.$valid) {
            $scope.user.push({
                fName: userInfo.fName,
                lName: userInfo.lName,
                street: userInfo.street,
                subscribe: userInfo.subscribe,
                delivery: userInfo.delivery
            });
            console.log("User saved");
        } else {
            console.log("Error: Couldn't save user")
        }
    }
});

I have tried userInfo.subscribe = true and $scope.userInfo.subscribe = true.

Update: Sorry, it might be a duplicate question. The reason why it didn't work for me was because I originally have this:

<input type="checkbox" name="subscribe" ng-model="userInfo.subscribe" ng-true-value="'Subscribe'" ng-false-value="'Don\'t Subscribe'"/>

The following didn't work for me:

$scope.userInfo = {};
$scope.userInfo.subscribe = true;

It should be:

$scope.userInfo = {};
$scope.userInfo.subscribe = 'Subscribe';

You didn't initialize userInfo anywhere. You could do ng-init in the html or change userInfo.subscribe to $scope.userInfo = {subscribe: true}; — Bryan Euton
– Bryan Euton, Commented Jul 25, 2018 at 15:17

Pedro Henrique · Accepted Answer · 2018-07-25 15:19:27Z

2

You should declare your userInfo object on your $scope first.

It works for me using this code:

var app9 = angular.module('app9', []);
app9.controller('userCtrl', function ($scope) {        
    $scope.userInfo = {};
    $scope.userInfo.subscribe = true;
    $scope.saveUser = function (userInfo) {
        if ($scope.userForm.$valid) {
            $scope.user.push({
                fName: userInfo.fName,
                lName: userInfo.lName,
                street: userInfo.street,
                subscribe: userInfo.subscribe,
                delivery: userInfo.delivery
            });
            console.log("User saved");
        } else {
            console.log("Error: Couldn't save user")
        }
    }
});

answered Jul 25, 2018 at 15:19

Pedro Henrique

3721 gold badge2 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Angularjs checkbox checked by default on load not working inside a form with ng-true-value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related