ion-checkbox "checked" attribute not working

Question

I am pretty new to angular/ionic and I am trying to create a form with checkboxes that are checked by default.

It tried both

checked

and

checked="true"

but neither is working. The strange thing is, that the attribute 'disabled' works just fine.

Here is my html:

<ion-header>
    <ion-toolbar>
        <ion-title>sold-items</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <form (ngSubmit)="addSoldItem()" name="addItemForm">
        <ion-item>
            <ion-label>Name</ion-label>
            <ion-input type="text" [(ngModel)]="soldItem.item" name="item"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label>Brutto</ion-label>
            <ion-input type="number" [(ngModel)]="soldItem.gross" name="gross"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label>eBay</ion-label>
            <ion-checkbox checked [(ngModel)]="soldItem.ebay" name="ebay"></ion-checkbox>
        </ion-item>
        <ion-item>
            <ion-label>PayPal</ion-label>
            <ion-checkbox checked="true" [(ngModel)]="soldItem.paypal" name="paypal"></ion-checkbox>
        </ion-item>
        <ion-item>
            <ion-label>Provision</ion-label>
            <ion-checkbox checked="true" [(ngModel)]="soldItem.commission" name="commission"></ion-checkbox>
        </ion-item>
        <ion-item>
            <ion-label>Versand soll</ion-label>
            <ion-input type="number" [(ngModel)]="soldItem.shipping_must" name="shipping_must"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label>Versand ist</ion-label>
            <ion-input type="number" [(ngModel)]="soldItem.shipping_is" name="shipping_is"></ion-input>
        </ion-item>
        <button ion-button type="submit" block>Hinzufügen</button>
    </form>

    <ion-card *ngFor="let soldItem of (soldItems | async)?.slice().reverse()">
        <ion-card-header>
            <ion-card-title>{{ soldItem.item }}</ion-card-title>
            <ion-card-subtitle>€ {{ soldItem.gross }}</ion-card-subtitle>
        </ion-card-header>
        <ion-card-content>
            <p>
                <b>Netto: €</b> {{ soldItem.net }}
            </p>
            <p>
                <b>eBay: €</b> {{ soldItem.ebay_fees }}
            </p>
            <p>
                <b>PayPal: €</b> {{ soldItem.paypal_fees }}
            </p>
            <p>
                <b>Versand soll: €</b> {{ soldItem.shipping_must }}
            </p>
            <p>
                <b>Versand ist: €</b> {{ soldItem.shipping_is }}
            </p>
            <p>
                <b>Verkauft am: </b> {{ soldItem.date_sold }}
            </p>
        </ion-card-content>
    </ion-card>
</ion-content>

This is what it looks like:

I am using angular8 and ionic4 on a MacBook Pro with the latest Safari Browser. Any ideas?

Harter

Answer 1

There's a ngModel on the checkbox, so that will determin the checked value.

<ion-checkbox [(ngModel)]="soldItem.ebay" name="ebay"></ion-checkbox>

The value of soldItem.ebay will determine the checked state. If that is set to true, the checkbox will be checked to start with.

---

On an unrelated note. Consider using reactive forms.

Reactive forms provide more predictability with synchronous access to the data model, immutability with observable operators, and change tracking through observable streams. If you prefer direct access to modify data in your template, template-driven forms are less explicit because they rely on directives embedded in the template, along with mutable data to track changes asynchronously

A guide to the key diffences betweem template driven (what you have now) and reactive forms.

In general:

• Reactive forms are more robust: they're more scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application, use reactive forms.
• Template-driven forms are useful for adding a simple form to an app, such as an email list signup form. They're easy to add to an app, but they don't scale as well as reactive forms. If you have very basic form requirements and logic that can be managed solely in the template, use template-driven forms.

Velocity

Aaaah, now I get this all. Thank you. I wasn't aware that ngModel would override the attribute's value. Now it works :) – Harter

Thanks for the hint. Since I am pretty new to all this, I was more familiar with adding 'simple' forms. I sure will consider using reactive forms in the future as I want my PWA to be finished by tonight. – Harter

Just a tip: if you still can't change the checked status. Check if all of your inputs have different name=" " properties. – Makhachkala

Answer 2

PROBLEM: Using the TEMPLATE method, this works fine the first time, but thereafter toggles disregarding the ngModel:

Template:

<ion-row>
    <ion-col size="4">
      <b>Account No:</b>
    </ion-col>
    <ion-col size="7">
      <ion-input type="text" [(ngModel)]="AccNo" name="AccNo"></ion-input>
    </ion-col>
    <ion-col size="1">
      <input type="checkbox" name="AccNoChkBox" [(ngModel)]="AccNoChkBox" 
            (change)="CheckBoxChange('AccNo')">
     </ion-col>
</ion-row>

TypeScript:
CheckBoxChange(Field) {
// --- By way of example, always set the check box to false
       alert("Here");
       this.AccNoChkBox = false;
}

Check box toggles remains false after the first click, but there after toggles to 'checked' even though binding set to false - AND, the alert is show each time.

Putman