Ion-toggle not returning "true"

Ionic Framework ionic-v3
1

Hi,

I have a form where i am planning to display the text boxes on the basis of option provided using ion-toggle button. User can enter either email or phone number on the basis of value returned by ion-toggle. This button is somehow not returning “true” and when i click on it 2-3 times then i get an error message. Here is sample of my code with error message:

HTML Code:

<ion-item>
  <ion-label>Mobile/Email</ion-label>
  <ion-toggle [(ngModel)]="toggle" formControlName="phone"></ion-toggle>
</ion-item>
<ion-item *ngIf="toggle == true">
  <ion-label stacked>Mobile Number</ion-label>
  <ion-input type="phone" [(ngModel)]="link.phone" formControlName="phone"></ion-input>
</ion-item>
<ion-item *ngIf="toggle == false">
  <ion-label stacked>Parent Email ID</ion-label>
  <ion-input type="email" [(ngModel)]="link.emailid" formControlName="emailid"></ion-input>
</ion-item>

Error Message:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'undefined'.
    at viewDebugError (core.es5.js:8604)
    at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8582)
    at checkBindingNoChanges (core.es5.js:8746)
    at checkNoChangesNodeInline (core.es5.js:12177)
    at checkNoChangesNode (core.es5.js:12149)
    at debugCheckNoChangesNode (core.es5.js:12723)
    at debugCheckDirectivesFn (core.es5.js:12625)
    at Object.View_AddkidPage_0.co [as updateDirectives] (AddkidPage.html:55)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12607)
    at checkNoChangesView (core.es5.js:12007)
    at callViewAction (core.es5.js:12328)

Please help.

2

I suspect your two binding methods are fighting. I would suggest using either [(ngModel)] or formControlName, but never both at once.

3

Might be. But the problem is that i will have to use formControlName inside the form and if i don’t use ngModel then what will be the way to check the value returned by toggle button.

4

The FormControl’s value property.

5

Sorry. Haven’t used it yet. Can you please share some sample snippet.

6

Angular docs.

1 Like
7

Thanks. Let me have a look.