Ion-toggle not returning "true"



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

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 [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.


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


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.


The FormControl's value property.


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


Angular docs.


Thanks. Let me have a look.