How can I set a checkbox to null instead of false with Angular?

Issue

I am currently working on a filter system where the user can select a few parameters to filter an item list.

For example, an item list could be a list of dishes while the filters are arranged as set of checkboxes with labels like vegan, vegetarian, fish-only, etc. (These are arranged as checkboxes for the sake of the example. I am aware this should be a dropdown).

I want each checkbox to return null instead of false when unchecked. In my backend, the false gets received as that field should be -false- instead of just not filtering it with that field. Then if someone checks, using form control, it will set the initial value to null.

Initially, it works fine but once the user checks and unchecks the checkbox then the value is changed back to false. I tried changing the type of my form control to <true | null> but that doesn't seem to work either.

I am using input tag with type="Checkbox".

Solution

like this SO, simply change Y and N:

using ReactiveForms

  <input type="checkBox" 
       [ngModel]="addTermForm.get('Status').value?true:false"
       (ngModelChange)="addTermForm.get('Status').setValue($event?true:null)"
       [ngModelOptions]="{standalone:true}"
       >

using simple Models

  <input type="checkBox" 
       [ngModel]="mivariable?true:false"
       (ngModelChange)="mivariable=$event?true:null"
       >

Answered By - Eliseo