Angular 5 default value not default selected

Question

When you create a select with ngFor loop for options, default value from ngModel is not selected

HTML :

<form style="margin : 20%;">
    <div class="row">
        <div class="form-group">
            <label for="foo">K1 :{{keyboard | json}}</label>
            <select [(ngModel)]="keyboard" name="foo" class="custom-select"> 
                <option *ngFor="let a of foo" [ngValue]="a">{{a.name}}</option> 
            </select>
        </div>
    </div>
    <div class="row">


        <div class="form-group">
            <label for="fooz">K2 :{{keyboard2 | json}}</label>
            <select [(ngModel)]="keyboard2" name="fooz" class="custom-select"> 
                <option [ngValue]="foo[0]">AZERTY</option> 
                <option [ngValue]="foo[1]">QWERTY</option> 
            </select>
        </div>
    </div>
    <div class="row">


        <div class="form-group">
            <label for="fooa">K2 :{{keyboardStr | json}}</label>
            <select [(ngModel)]="keyboardStr" name="fooa" class="custom-select"> 
                <option [selected]="keyboardStr == 'AZERTY'" [ngValue]="AZERTY">AZERTY</option> 
                <option [selected]="keyboardStr == 'QWERTY'" [ngValue]="QWERTY">QWERTY</option> 
            </select>
        </div>
    </div>
    <div class="row">

        <div class="form-group">
            <label for="fooa">K2-bis :{{keyboardStr | json}}</label>
            <select [(ngModel)]="keyboardStr" name="fooa" class="custom-select"> 
                <option [selected]="keyboardStr == 'AZERTY'" [value]="AZERTY">AZERTY</option> 
                <option [selected]="keyboardStr == 'QWERTY'" [value]="QWERTY">QWERTY</option> 
            </select>
        </div>
    </div>
    <div class="row">

        <div class="form-group">
            <label for="fooa">K2-ter :{{keyboardStr | json}}</label>
            <select [(ngModel)]="keyboardStr" name="fooa" class="custom-select"> 
                <option [selected]="keyboardStr == 'AZERTY'" value="AZERTY">AZERTY</option> 
                <option [selected]="keyboardStr == 'QWERTY'" value="QWERTY">QWERTY</option> 
            </select>
        </div>
    </div>
</form> 

Component :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

    private foo: any[] = [{id: 1, name: "AZERTY"}, {id: 2, name: "QWERTY"}];
    private keyboard: any = {id: 1, name: 'AZERTY'};
    private keyboard2 : any = {id: 1, name: 'AZERTY'};
    private keyboardStr : string = 'AZERTY';

  constructor() { }

  ngOnInit() {
  }

}

Result :

Shouldn't AZERTY be default selecteded ?

Is there a conflict when using both ngModel and ngValue ? Because in the case of K1 example, value cannot be used as 'a' is an object right ?

Edit :

@Roy D. Porter Ok but imagine that I have this 'unit' object :

{
  "id": 1,
  "type": "REMISE",
  "owner": "OWN",
  "to": {
    "id": 1,
    "alone": true,
    "level": 1,
    "name": "Participant",
    "minSales": 0.0,
    "minTeamNumber": 0,
    "durationCondition": 0,
    "durationAwardCondition": null
  },
  "limit": 0.0,
  "percentage": 25.0,
  "alone": true
}

This will display well the type as model is a string :

<select [(ngModel)]="unit.type" name="tye" class="custom-select">
                    <option *ngFor="let type of types" [ngValue]="type">{{type | camelCase}}</option>
                </select>

This does not display the default value it should : {{award.name | camelCase}}

I assume this is caused by award not being a string. From what I see, ngModel is selected when it is a string but not when it's an object.

Angular v5.0.0

Answer 1

When you use [ngValue] on option, use [compareWith] on select. Give it a function that compare two objects (in type of your ngValue and ngModel objects).

You have examples in the doc here : https://angular.io/api/forms/SelectControlValueAccessor

Best regards

Answer 2

I've faced the same issue as you.

My usual solution is to add an option to the list, and set it's value to -1, and initialise the binded variable to -1.

So in your case:

        <select [(ngModel)]="keyboard" name="foo" class="custom-select">
            <option value="-1">Please select an answer</option>
            <option *ngFor="let a of foo" [ngValue]="a">{{a.name}}</option> 
        </select>

And in your component controller, initialise the keyboard variable to -1.