Angular 4 form select is able to display the default value

Question

    `<select class="form-control" id="customer" required [(ngModel)]="application.customer" name="customer" #customer="ngModel">
      <option *ngFor="let customer of customers" [ngValue]="customer">
        {{customer.id}} {{customer.first_name}} {{customer.last_name}}</option>
    </select>`

application.customer and customer are both type of Customer objects. The default value is not set when application is populated in the component. Other text input field like application.vehicle_make can be loaded without any issue. Does anyone has any idea why default value from application isn't selected? I am using the latest angular 5.

score 1 · Answer 1 · answered Dec 21 '17 at 06:32

Bind it with Id of your particular one use!

<select class="form-control" id="customer" required [(ngModel)]="application.customer" name="customer" #customer="ngModel"> <option *ngFor="let customer of customers" [value]="customer.id"> {{customer.id}} {{customer.first_name}} {{customer.last_name}}</option> </select>

Now [ngValue] trun to [value]

score 0 · Answer 2 · answered Dec 21 '17 at 06:38

There most likely isn't a customer of customers that equals application.customer. If you want a default selected you need to add that attribute to one of the items:

  <option *ngFor="let customer of customers; let first = first;" [ngValue]="customer" selected="first">
    {{customer.id}} {{customer.first_name}} {{customer.last_name}}</option>

This will select the first item in the array of customers. You can also use let i = index; in the *ngFor to select a certain index, or even use let last = last. This will set application.customer equal to the selected customer of customers.

Angular 4 form select is able to display the default value

2 Answers2