Why is typescript converting number to string?

Question

I have a dropdown with these values below and when I first use the initial value it's undefined. But then after I change to '30 min' then back to 'Any' the property I'm using as the ngModel gets set from 30 to 'undefined'! It gets set to a string?

The actual property looks like this below - I didn't realize typescript would convert it like that?

length: number;

where my dropdown is here

<div class="form-group">
  <label for="length">Length</label>
  <select class="form-control w-100" id="length" name="length" [(ngModel)]="eventParams.length">
    <option *ngFor="let length of lengthList" [value]="length.value">
      {{length.display}}
    </option>
  </select>
</div>

  lengthList = [
    {value: undefined, display: 'Any'},
    {value: 30, display: '30 min'},
    {value: 45, display: '45 min'},
    {value: 60, display: '60 min'},
    {value: 90, display: '90 min'}
  ];

What is the problem of converting it to 'undefined'?

M Fuat
– M Fuat

2020-08-05 04:04:46 +00:00
Commented Aug 5, 2020 at 4:04 — M Fuat
– M Fuat, Commented Aug 5, 2020 at 4:04

Chellappan வ · Accepted Answer · 2020-08-05 04:10:21Z

3

As mentioned in the Angular documentation

Value attribute tracks simple string values bound to the option element. For objects, use the ngValue input binding.

Use ngValue attribute it will work as expected.

<div class="form-group">
      <label for="length">Length</label>
      <select class="form-control w-100" id="length" name="length" [(ngModel)]="eventParams.length">
        <option *ngFor="let length of lengthList" [ngValue]="length.value">
          {{length.display}}
        </option>
      </select>
    </div>

answered Aug 5, 2020 at 4:10

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

Why is typescript converting number to string?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related