Ion-checkbox with Reactive Forms always defaults to checked

Ionic Framework ionic-v3
1

Hi folks,

I’ve been trying to build a (Reactive) form today that has checkboxes, however whatever I try I cannot get the checkboxes to default to unchecked when the page loads. Does anyone know how to work around this?

I’ve set up a StackBlitz here:

I’m using:
Angular 5.2.9
Ionic-Angular 3.9.2

Any help will be much appreciated!

1 Like
2

try this

ngOnInit(): void {
    this.form = this.formBuilder.group({
      demo: '',
      itemOne: null,
      itemTwo: null,
      itemThree:null,
    });
  }
3

You’re an absolute hero.

Thank you so much!

4

Wherever possible, I would recommend using Ionic lifecycle events (such as ionViewDidLoad or ionViewWillEnter) as opposed to Angular ones (like ngOnInit).

5

I did wonder about that. To be honest I’ve just come off the back of a large Angular project, so it was as much habit as anything else. Are you able to explain the benefits of using the Ionic lifecycle hooks over the Angular ones?

Presumably if I’m writing a component rather than an Ionic page I am ok to use the Angular lifecycle hooks?

6

My main thinking is that I want to minimize my dependency on Ionic internals. If Ionic changes under the hood how lifecycle is managed, maybe tomorrow the Angular events won’t fire when I’m expecting (or maybe at all in some cases). I figure the Ionic events are documented, so they will maintain that compatibility. I also find ionViewWillEnter simultaneously widely useful (in fact, it is what I would use for this topic, as presumably one would want the form to get reset every time the page is activated, even if it is from a cache) and having no direct Angular equivalent.

I would agree with you and even say more strongly that that’s your only option. Embedded components don’t get NavController lifecycle calls. My apologies if that’s the case for this thread: I didn’t examine the plunkr thing in the OP.