Angular pre-select dropdown item based on values in typescript

Question

I was having some problem when trying to pre-select Angular dropdown item based on value in typescript. Here is my typescript:

transferFeeTblCombBxRowIndex : any;
if (arborSvcTy.trim() === '501') {
    this.transferFeeTblCombBxRowIndex = '1';
} else {
    console.log("COME IN ELSE");
    this.transferFeeTblCombBxRowIndex = '0';
}

In my html, I am trying to use two-way binding:

<td>
     <select class="form-control" name="transferFeeTblCombBxRow" [(ngModel)]="transferFeeTblCombBxRow" [disabled]="isTransferFeeTblCombBxRowDisabled">
           <option disabled value="transferFeeTblCombBxRowIndex == '0'">-- Please Select --</option>
           <option value="transferFeeTblCombBxRowIndex == '1'">Charged</option>
            <option value="transferFeeTblCombBxRowIndex == '2'">Waived</option>
     </select>
</td>

I managed to print out the "COME IN ELSE" from the console. However, the dropdown is not pre-selected at the first item.

Any ideas? Thanks!

Prashant Pimpale · Accepted Answer · 2019-08-10 04:38:50Z

2

This is working for me:) And this transferFeeTblCombBxRowIndex == '0' condition will return boolean variable (true/flase), not the value for select.

<select class="form-control" name="transferFeeTblCombBxRow [(ngModel)]="transferFeeTblCombBxRow">
   <option disabled value="0">-- Please Select --</option>
   <option value="1">Charged</option>
   <option value="2">Waived</option>
</select>

TS:

transferFeeTblCombBxRow : number = 2;

StackBlitz

answered Aug 10, 2019 at 4:38

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

techwestcoastsfosea Dec 24, 2024 at 0:36

You deserve a gold medal for this. I wasted 10+ hours trying to resolve a similar issue. Even ChatGPT and Google Gemini couldn't help. Yet, the fix was so simple.

nash11 · Accepted Answer · 2019-08-10 05:13:53Z

Your expectation of how a select dropdown seems to be incorrect. In a select dropdown, each option is given a unique value. This is needed so you can differentiate from the options in your dropdown. When you select one of these options, the value of that option is set to the value of your select dropdown. Using ngModel we bind to the value of the select dropdown.

Your template expressions would set the option values as true or false. You need to change the option values from template expressions to the actual values itself. You have also set the wrong variable as your ngModel. In your component, you are setting transferFeeTblCombBxRowIndex while you are using transferFeeTblCombBxRow as your ngModel.

This is how your template should look.

<select class="form-control" name="transferFeeTblCombBxRow" [(ngModel)]="transferFeeTblCombBxRowIndex" [disabled]="isTransferFeeTblCombBxRowDisabled">
  <option value="0" disabled>-- Please Select --</option>
  <option value="1">Charged</option>
  <option value="2">Waived</option>
</select>

On a side note, even if you did want to evaluate a template expression, you'd have to use [value] or enclose your expression in {{...}} instead (like [value]="transferFeeTblCombBxRowIndex == '0'" or value="{{transferFeeTblCombBxRowIndex == '0'}}") (See docs).

Collectives™ on Stack Overflow

Angular pre-select dropdown item based on values in typescript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related