Problem with Angular 2 application and select an option in Internet Explorer

Question

There is a strange problem in Internet Explorer, and I hope someone can explain this problem to me.

In my Angular 2 application, I have a form with a select box. The user can choose between different templates (names). The property templatesis an array and is defined in the TypeScript component file and populated with possible template names.

The html template is as follows:

<select required [(ngModel)]="template">
    <option *ngFor="let t of templates" [ngValue]="t">{{ t }}</option>
</select>

<button type="button" [disabled]="!form1.valid" (click)="nextForm()">Next</button>

Everything works as expected (Chrome, Firefox) if I do not use Internet Explorer 11 (and most likely earlier). For some strange reason, I cannot choose an option if there is only one available. If there are two options, it works as expected.

In Internet Explorer, the following happens:

• Gui , templates
• TypeScript restful API templates
• gui (),
• , , . , - ""

, , template ( null), form1.valid false (form1 - , , select).

, IE ,

if (this.templates.length > 0) this.template = this.templates[0]

. , .

IE , ?

---

EDIT: * ngFor. , IE 11:

<select required [(ngModel)]="template">
    <option>Test</option>
</select>

Answer 1

, , , . Plunker.

Angular. , , :

<form #editForm="ngForm">
    <select name="select">
        <option *ngIf="!editForm.value.select" [ngValue]="null" selected></option>
        <option *ngFor="let option of options" [ngValue]="option">{{option}}</option>
    </select>
</form>