One issue I am facing is with a form that includes a checkbox bound to an ng-model property. The problem arises when the checkbox is checked, as the value gets set in the model. However, when it is unchecked, the key and value remain unset, causing API validation errors.
<div class="form-group">
<label for="title">Title</label>
<input type="text" ng-model="post.title" placeholder="Post title..." />
</div>
<div class="form-group">
<label for="author">Author</label>
<input type="text" ng-model="post.author" placeholder="Your name" />
</div>
<div class="form-group">
<label for="content">Content</label>
<textarea ng-model="post.content"></textarea>
</div>
<div class="form-group">
<label for="visible">Visible?</label>
<input type="checkbox" ng-model="post.is_visible" />
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Save" />
</div>
blogModule.controller('PostCreateController', ['$scope', '$stateParams', 'PostResource',
function ($scope, $stateParams, PostResource) {
$scope.post = new PostResource();
$scope.addPost = function () {
console.log($scope.post); // post.is_visible is undefined
//$scope.post.$save();
}
}
]);
Prior to saving, the model appears like this:
{
$resolved: true
author: "asdag"
content: "adfadsf"
title: "adgadf"
proto: ...
}
I'm puzzled why post.is_visible remains undefined instead of being automatically set to false when not checked. What steps can I take to ensure it's always set to false?