Angular 2 FormBuilder unable to validate ion-checkboxes

Ionic Framework ionic-v3
1

Hi everyone,

first of all, sorry for my bad english, it’s not my native language. I’ll try to write well.

I’m having trouble with form validation and checkboxes. To make it easier, I have prepared a basic example to explain my problem, based on ionic’s blank template.

Imagine we have this ‘cool form’:

Snip20170906_3
Snip20170906_3358×582 16.4 KB

Basically, the save button is disabled while user has not chosen the package and the fruit (while form is not valid).
If I chose one of the options, the result is this:

Snip20170906_4
Snip20170906_4363×637 18.3 KB

OK. This has been easy.

I do it this way:

home.ts:

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {    
    myForm: FormGroup;    
    constructor(private formBuilder: FormBuilder) {        
        this.myForm = this.formBuilder.group({
            package: [
                '',
                Validators.compose([
                    Validators.required
                ])
            ],
            fruits: [
                '',
                Validators.compose([
                    Validators.required
                ])
            ]
        });        
    }    
}

home.html:

<ion-content padding [formGroup]="myForm">

    <ion-card>
        <ion-card-header>Chose your package</ion-card-header>
        <ion-list radio-group formControlName="package">
            <ion-item>
                <ion-icon name="basket" item-start></ion-icon>
                <ion-label>Basket</ion-label>
                <ion-radio value="basket" item-end></ion-radio>
            </ion-item>
            <ion-item>
                <ion-icon name="cube" item-start></ion-icon>
                <ion-label>Box</ion-label>
                <ion-radio value="box" item-end></ion-radio>
            </ion-item>
        </ion-list>
    </ion-card>

    <ion-card>
        <ion-card-header>Choose the fruit you want</ion-card-header>
        <ion-list radio-group formControlName="fruits">
            <ion-item>
                <ion-label>Apples</ion-label>
                <ion-radio value="apples" item-end></ion-radio>
            </ion-item>
            <ion-item>
                <ion-label>Bananas</ion-label>
                <ion-radio value="bananas" item-end></ion-radio>
            </ion-item>
            <ion-item>
                <ion-label>Watermelons</ion-label>
                <ion-radio value="watermelons" item-end></ion-radio>
            </ion-item>
            <ion-item>
                <ion-label>Oranges</ion-label>
                <ion-radio value="oranges" item-end></ion-radio>
            </ion-item>
            <ion-item>
                <ion-label>Pears</ion-label>
                <ion-radio value="pears" item-end></ion-radio>
            </ion-item>
        </ion-list>
    </ion-card>

    <p *ngIf="myForm.valid">{{myForm.controls['package'].value}} of {{myForm.controls['fruits'].value}}</p>

    <button ion-button block [disabled]="!myForm.valid">SAVE</button>

</ion-content>

So, the problem appears when I try to modify the behaviour of this form:

Now, I want the user have to select a minimum of 2 fruits.

To achieve this I first modify the controller this way (home.ts):

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    myForm: FormGroup;
    constructor(private formBuilder: FormBuilder) {
        this.myForm = this.formBuilder.group({
            package: [
                '',
                Validators.compose([
                    Validators.required
                ])
            ],
            fruits: [
                '',
                Validators.compose([
                    Validators.minLength(2), // minimum of 2 fruits
                    Validators.required
                ])
            ]
        });
    }
}

Now, the only thing missing is modify the template (home.html) replacing ion-radios to ion-checkboxes but there is no way to make it work!

  • ion-checkbox not allow value attribute
  • I don’t have check-group attribute like radio-group attribute

Believe me, I tried it in multiple ways but I can’t achieve it!

I really, really need help about this.

Can anyone tell me what I’m doing wrong, or how to make this possible in ionic?

My system information:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.8.1
ionic (Ionic CLI) : 3.8.1

local packages:

@ionic/app-scripts : 2.1.4
Ionic Framework    : ionic-angular 3.6.0

System:

Node : v7.1.0
npm  : 4.0.5
OS   : macOS Sierra

Please, any help will be appreciated!

2

I would lean towards using a multivalue <ion-select> here instead of a bunch of checkboxes. If, however, you do insist on going with checkboxes, each of them is going to need their own backing control and you’re going to have to do the validation yourself.

3

Yes @rapropos, I have reached the same conclusion.

Thanks!