Search code examples
angularionic-frameworkslotion-checkboxion-radio-group

Ionic 6 Angular slot="error" doesn't work with ion-checkbox and ion-radio-group


I am trying slot error , it works for more of the input fields, but seems it doesn’t work for ion-checkbox and for the ion-radio-group . In the in the .ts file I have.

private buildForm() {
        this.form = this.formBuilder.group({
            'checkBox':[null, [Validators.required]],
            'radioButtonGroup':[null, [Validators.required]],
        });
    }

and in the .html template

   <ion-item>
        <ion-label position="stacked">Check box</ion-label>
        <ion-checkbox position="fixed" formControlName="checkBox"></ion-checkbox>
        <ion-note slot="error"> Please select</ion-note>
    </ion-item>

    <ion-list >
        <ion-radio-group formControlName="radioButtonGroup" >
            <ion-list-header>
                <ion-label>Radio button Group</ion-label>
            </ion-list-header>

            <ion-item>
                <ion-label>Selection1</ion-label>
                <ion-radio slot="start" value="Selection1"></ion-radio>
            </ion-item>
            <ion-item>
                <ion-label>Selection3</ion-label>
                <ion-radio slot="start" value="Selection3"></ion-radio>
            </ion-item>
        </ion-radio-group>
        <ion-note slot="error"> Please select</ion-note>
    </ion-list>

Please for your help.


Solution

  • In general seems its supported only for input fields. Here its the detailed answer from Ionic team . https://github.com/ionic-team/ionic-framework/issues/25332