What is wrong with Angular's logical OR in option attribute? When [(ngModel)] is used in select the [selected] attribute doesn't affect the selection

Question

I have an option in select like this:

<option [selected]=" impulse === 10 || isTraining " value="10">10</option>

When I have any possible value of impulse and isTraining is true my expectation is that the current option will be selected by default due to selected keyword in the dropdown, but it isn't. Are logical operators ever evaluated for the attributes required a boolean value?

The full select here is

<select class="form-control" name="flashFormatImpulse" id="field_flashFormatImpulses"
                            (change)="handleFlashImpulseSelection($event)" [(ngModel)]="impulseSelection" [disabled]="isStarted">
                        <option *ngIf="!isTraining" [selected]="impulse === 1" value="1">1</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 2" value="2">2</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 3" value="3">3</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 4" value="4">4</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 5" value="5">5</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 6" value="6">6</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 7" value="7">7</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 8" value="8">8</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 9" value="9">9</option>
                        <option [selected]="impulse === 10 || isTraining" value="10">10</option>
                    </select>

UPD

that is for code below:

<div class="form-group">
                    <label class="form-control-label" jhiTranslate="businesslogic.flashs.flashcard.impulse"
                           for="field_flashFormatImpulses">Flash Impulse</label>
                    <select class="form-control" name="flashFormatImpulse" id="field_flashFormatImpulses"
                            (change)="handleFlashImpulseSelection($event)" [(ngModel)]="impulseSelection" [disabled]="isStarted">
                        <option *ngIf="!isTraining" [selected]="impulse === 1" value="1">1</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 2" value="2">2</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 3" value="3">3</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 4" value="4">4</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 5" value="5">5</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 6" value="6">6</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 7" value="7">7</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 8" value="8">8</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 9" value="9">9</option>
                        <option [selected]="impulse === 10 || isTraining" value="10">10</option>
                    </select>
                </div>
                <div>
                    <select class="form-control">
                        <option [selected]="true" value="10">10</option>
                    </select>
                </div>

and the effect is still the same when we change the code to

<div class="form-group">
                    <label class="form-control-label" jhiTranslate="businesslogic.flashs.flashcard.impulse"
                           for="field_flashFormatImpulses">Flash Impulse</label>
                    <select class="form-control" name="flashFormatImpulse" id="field_flashFormatImpulses"
                            (change)="handleFlashImpulseSelection($event)" [(ngModel)]="impulseSelection" [disabled]="isStarted">
                        <option *ngIf="!isTraining" [selected]="impulse === 1" value="1">1</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 2" value="2">2</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 3" value="3">3</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 4" value="4">4</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 5" value="5">5</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 6" value="6">6</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 7" value="7">7</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 8" value="8">8</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 9" value="9">9</option>
                        <option [selected]="true" value="10">10</option>
                    </select>
                </div>
                <div>
                    <select class="form-control">
                        <option [selected]="true" value="10">10</option>
                    </select>
                </div>

i.e. having the same [selected] for both (but a different look).

I.e. <option [selected]="true" value="10">10</option> works and <option [selected]="impulse === 10 || isTraining" value="10">10</option> is not

UPD 2

That's how it looks for code below:

<div class="form-group">
                    <label class="form-control-label" jhiTranslate="businesslogic.flashs.flashcard.impulse"
                           for="field_flashFormatImpulses">Flash Impulse</label>
                    <select class="form-control" name="flashFormatImpulse" [(ngModel)]="impulseSelection" id="field_flashFormatImpulses"
                            (change)="handleFlashImpulseSelection($event)"  [disabled]="isStarted">
                        <option *ngIf="!isTraining" [selected]="impulse === 1" value="1">1</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 2" value="2">2</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 3" value="3">3</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 4" value="4">4</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 5" value="5">5</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 6" value="6">6</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 7" value="7">7</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 8" value="8">8</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 9" value="9">9</option>
                        <option [selected]="impulse === 10 || isTraining" value="10">10</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" >
                        <option *ngIf="!isTraining" [selected]="impulse === 3" value="3">9</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 9" value="9">9</option>
                        <option [selected]="impulse === 10 || isTraining" value="10">10</option>
                    </select>
                </div>

                <div>impulse {{impulse}}, isTraining {{isTraining}}, result: {{impulse === 10 || isTraining}}</div>

                <select class="form-control">
                    <option [selected]="impulse === 10 || isTraining" value="10">10</option>
                </select>

The problem with selection correlates with using the [(ngModel)]="impulseSelection" for the selector (that is a binding for value, used on the controller side) and is initialized as

impulseSelection = 3;

So the associated binding is always overriding the value of the selector to 3 while it is not present there. It looks like the only solution is to force this impulseSelection value to 10 when isTraining is assigned to true.

what you have written looks fine. it's likely a result of the rest of your code. replace "impulse === 10 || isTraining" with "true" and see if its working. most likely you have several options set to true at the same time — Rick, Jun 19 '20 at 20:09
as written, there's no point in adding "|| isTraining" because when isTraining is true, it will be the only option available. — Rick, Jun 19 '20 at 20:13
@Rick I've tried with this `` and still have option not selected by default... — Eljah, Jun 19 '20 at 20:14
@Rick I'd like it not only be the only option, but also selected by default with no need to select if from the initially empty dropdown for the better user experience. — Eljah, Jun 19 '20 at 20:18
right. there's no reason why that shouldn't work. check your console for javascript errors — Rick, Jun 19 '20 at 20:20
@Rick please see my question updated; that's related to the model binding for the selector — Eljah, Jun 19 '20 at 21:16

Rick · Accepted Answer · 2020-06-19T21:05:38.520

1

there's no reason why that should not be working. Check your logs for javascript errors. If none start with and empty select statement and build it back to what you have, one piece at a time until you find the problem.

I also like to add the values to the html just to be sure they are what you think they are. like this:

<div>impulse {{impulse}}, isTraining {{isTraining}}, result: {{impulse === 10 || isTraining}}</div>

<select class="form-control">
  <option [selected]="impulse === 10 || isTraining" value="10">10</option>
</select>

edited Jun 19 '20 at 21:05

answered Jun 19 '20 at 20:23

Rick

1,710
8
17

added more intriguing data to the question; still see no console errors – Eljah Jun 19 '20 at 20:35
sure. is not working while is working – Eljah Jun 19 '20 at 20:50
I'm still not sure what "not working' means if you have only one option it should show by default. try console logging impulse && isTraining. maybe they aren't what you think they are? its also possible they are both undefined at some point? – Rick Jun 19 '20 at 21:02
you may see how the only option can't be selected at the screenshot attached to the question. It is just not selected by default and it is possible to leave the select control not selected for any value. – Eljah Jun 19 '20 at 21:05
I edited my code above. try that and see if the values are what you think they are. – Rick Jun 19 '20 at 21:06
@Rich please see my question updated; that's related to the model binding for the selector. – Eljah Jun 19 '20 at 21:16

What is wrong with Angular's logical OR in option attribute? When [(ngModel)] is used in select the [selected] attribute doesn't affect the selection

1 Answers1