Ionic 4: Field not disabling properly

#1

Hey everybody
I have been struggling with the disabling of a date field for quite a while now so I thought perhaps you could help me a little.

The idea is that if the user selects “as soon as possible” the execution date field should become inactive and it should only be active if the user chooses "future date " or “standing order”.
Since my default option is “as soon as possible” the field is disabled by default but it doesn’t enable when choosing one of the two other options. I created a boolean variable that should be modified when one of the three options is selected (false for “as soon as possible” and true for the other two) and used the [disabled] property to try to activate and deactivate the field but regardfless of what option is chosen the field never changes its state.

Here’s the code:

 <ion-item>
          <ion-label >Execution mode</ion-label>
          <ion-select [(ngModel)]="execMode" name="now">
            <ion-option value="now"   onselect="this.setExecLater(false)">As soon as possible</ion-option>
            <ion-option value="future"  onselect="this.setExecLater(true)">Future date</ion-option>
            <ion-option value="standing"  onclick="this.setExecLater(true)" onselect="this.setExecLater(true)">Standing order</ion-option>

          </ion-select>
        </ion-item>
        <ion-item>
          <ion-label>{{ 'Execution date' | translate }}</ion-label>
          <ion-input [disabled]="!this.getExecLater()" type="Date">

          </ion-input>
        </ion-item>

        <div class="buttons" padding align="center">
          <button class="buttonerino" ion-button  block>{{ 'Accept' | translate }}</button>
          <button class="buttonerino"  ion-button  block>{{ 'Cancel' | translate }}</button>
        </div>
      </ion-list>
#2

Hey! so I have been working in v4 for a while now but I was started off on v2/3 so hopefully I am not too rusty

1.

I think this. is implied in the template

so instead of:

[disabled]="!this.getExecLater()"

try:

[disabled]="!getExecLater()"

2.

I think your ion events have to be wrapped in parentheses and fixed, as well as removing this. again
Ion Option output events

<ion-option value="YOUR_VALUE" (ionSelect)="YOUR_FUNCTION(PARAMS)"></ion-option>

** many of the ionic component events also emit a special variable called $event which you can console.log to view in detail:

<ion-option value="YOUR_VALUE" (ionSelect)="YOUR_FUNCTION($event)"></ion-option>

Hope this helps!

#3

I don’t bother with posts containing text as images, so I’m just going on what @jjdev has said your code does. Don’t ever call functions from property bindings like disabled: it’s extremely wasteful. Do the work of the function in the controller when something changes, and expose a boolean property instead. Bind to that in the template.

1 Like
#4

Sorry, I added my code now. I did not understand your suggestion, though.

#5

Presumaably getExecLater() returns true or false based on the state of various other things. Every time one of those things changes, put what getExecLater() would return (simply calling it at that point is one way to do this) into a controller property. Let’s call it willExecLater. Bind that to [disabled] instead of calling getExecLater() from your template. Angular change detection will call getExecLater() many many many times, even when it hasn’t changed, and you don’t want that.