Question 302841 in Html Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    One work around that I found is just a ternary operator on my form control for the particular checkbox, like so:

    form.checkboxFormControl = form.checkboxFormControl ? form.checkboxFormControl : null

    This is changing the false to null before going to my backend. Although this works I am looking for a more direct approach (possibly in the HTML or while intiallizing the form control.


  2. 0

    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"
       >
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search