Click here to Skip to main content
15,569,845 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I have the following select whose items are being obtained using an API call. Now I need that in case the API call fails and no items are returned to replace this select with an input text box to allow the use to enter freetext. Any idea why its not working?

<div class="col-xl-8">
  <select id="region" name="region" class="form-control" [(ngModel)]="player.region">
    <option class="dropdown-item" [ngValue]="null"><Empty></option>
    <option class="dropdown-item" *ngFor="let region of regions" id="region" [ngValue]="region">{{region.regionName}} ({{region.regionCode}})</option>
  </select>
</div>


What I have tried:

I have tried the following

<div class="col-xl-8">
    <ng-container *ngIf="region.length; then regionList; else freeText">
    </ng-container>

    <ng-template #regionList>
        <select id="region" name="region" class="form-control" [(ngModel)]="player.region">
            <option class="dropdown-item" [ngValue]="null"><Empty></option>
            <option class="dropdown-item" *ngFor="let region of regions" id="region" [ngValue]="region">{{region.regionName}} ({{region.regionCode}})</option>

        </select>
    </ng-template>

    <ng-template #freeText>
        <input type="text" class="form-control" [(ngModel)]="player.region" id="region" name="region" placeholder="Region">
    </ng-template>
</div>
Posted
Updated 11-Oct-22 3:01am
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900