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>