Ion-segment: dynamically generated segment buttons with validation not working


#1

When adding form validation to an ion-segment that has dynamically generated ion-segment-buttons, the following runtime exception is thrown.

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘false’. Current value: ‘true’.

Here’s what the code looks like:

<ion-segment *ngIf="observationTypes" formControlName="observationType">
    <ion-segment-button *ngFor="let observationType of observationTypes" value="{{observationType.name}}">
        {{observationType.name}}
    </ion-segment-button>
 </ion-segment>

Setting a static value fixes the issue but defeats the purpose of it being dynamic.

Any help is greatly appreciated. Thanks!


#2

I’m having a similar issue binding segment buttons when using ionic version 3.

I posted my question at Ionic Version 3 Segment Button Binding Error (example works in Ionic ver 2).