Pass 1 if checkbox is checked

I have a form group in which i am using a checkbox with form-control attribute. I want to pass the checkbox value as 1 if checked and otherwise pass 0 . Further i am posting some data to an API which includes this checkbox value as well. On posting the data...when i check the request payload from the browser, all the checkboxes value are null..whether i check them or uncheck them..it is showing null only...any help would be appreciated ..thanks in advance :)

i have tried examples from some of the sorces - 1) using ngModelChange 2) using [checked] but nothing seems to work

<div class="col-xs-2" [formGroup]="challanDataFilterForm">
                                <label class="switch " for="checkbox">
                                  <input type="checkbox" class="form-control" value="Challan_No" formControlName="Challan_No" id="checkbox"  >
                                    <div class="slider round">
                                    </div>
                                </label>&nbsp;
                                <label class="switch">Challan Number</label>
                            </div> 

challanDataFilterForm = new FormGroup({
    challan_no : new FormControl()
});

 // on form submission ,this fucntion is called
fucntion(){

console.log(this.challanDataFilterForm.value);//if i log the entire form ,then it shows true if checked and null if unchecked

console.log(this.challanDataFilterForm.get('challan_no').value);//it always gives null
}

i want the value to be passed in the form of 1 if checked and 0 if unchecked .