Passing an async option value with Angular

Question

This is the view:

<select name="day" (change)="showHourRange(value)">
  <option selected="true" disabled="disabled">Choose one</option>
  <option *ngFor="let delivery of deliveries$ | async"
          [value]="delivery.day">{{delivery.day | date:'dd/MM/yy'}}
  </option>
</select>

The value logs undefined when the method is called even if it is correctly shown inside the rendered options.

Sajeetharan · Accepted Answer · 2017-11-16 15:31:55Z

2

Use [ngModel] and ngModelChange

<select name="day" [ngModel]="selectedDelovery" (ngModelChange)="showHourRange($event)">
  <option *ngFor="let delivery of deliveries$ | async"
          [value]="delivery.day">{{delivery.day | date:'dd/MM/yy'}}
  </option>
</select>

answered Nov 16, 2017 at 15:31

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

3 Comments

cerealex Over a year ago

Although this solves the problem, it also rises another one. The placeholder static option now has disappeared. I've updated the view code, this line was removed for legibility.

BeetleJuice Over a year ago

@cerealex you mean the disabled choose one option is no longer in the DOM?

cerealex Over a year ago

Strangely enough, it is in the dom, but not shown as selected option in the view... (The box is empty)

Collectives™ on Stack Overflow

Passing an async option value with Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related