I'm encountering an issue where I am trying to send the value of a checkbox from my model to the server. Since the checkbox has not been interacted with on the form, Angular does not assign it a value and returns undefined when I request the value.
Below is the code snippet for my markup:
<div class="form-group">
<input id="templateDisable" type="checkbox" ng-model="template.disabled" />
<label for="templateDisable">Disabled</label>
</div>
Additionally, here is a simplified version of the save action in my controller:
$scope.save = function (form) {
if (form.$valid) {
var formData = new FormData();
// This line of code is causing the issue
formData.append("disabled", $scope.template.disabled);
// ... some other stuff
}
};
Surprisingly, toggling the checkbox before clicking the save action results in the template.disabled property being false, without any manual intervention.
I have come across similar queries such as AngularJS: Initial checkbox value not in model. However, simple tasks like managing checkboxes should ideally be built into Angular, eliminating the need for writing directives for basic functionalities like this.