Angular2 Les liaisons bidirectionnelles ne fonctionnent pas sur Firefox

Question

Je suis un novice utilisant Angular 2. J'ai développé quelques formes avec Typesript et cela fonctionne avec Chrome mais pas avec FireFox (version 45). Tout d'abord, j'ai essayé les liaisons de données "bidirectionnelles" avec les deux navigateurs: Chrome a un comportement correct mais FireFox ne prend pas en compte la liaison avec ngModel (Trouver mon exemple basé sur 5min quickstart de angular2).

En outre, la datepicker de bootstrap fonctionne bien sur Chrome et PAS sur Firefox.

Merci à l'avance,

app.component.ts

import {Component, OnInit, Event} from 'angular2/core'; 
import {FORM_DIRECTIVES, NgForm, NgIf, NgFor} from 'angular2/common'; 


import {Types} from './types'; 

@Component({ 
    selector: 'my-app', 
    templateUrl:'./app/app.component.html', 
    directives : [ 
     FORM_DIRECTIVES, 
     NgForm, 
     NgIf, 
     NgFor 
    ] 
}) 
export class AppComponent implements OnInit { 

    field:any; 

    types:Array<string> = Types; 

    ngOnInit() { 
     this.field= {}; 
    } 

    onChange(event:Event) { 
    console.log(this.field.type); 
    } 
} 

app.component.html

<h1>My First Angular 2 App</h1> 

<div class="form-group"> 
<label class="col-sm-2 control-label"> Select </label> 
<div class="col-sm-4"> 

<select class="form-control" 
     [(ngModel)]="field.type" 
     (change)=onChange($event) 
     title="Type"> 
    <option *ngFor="#t of types">{{ t }}</option> 
</select> 
</div> 

<hr/> 

<label class="col-sm-2 control-label"> Input </label> 
<div class="col-sm-4"> 
    <input type="text" 
     class="form-control input-sm" 
     [(ngModel)]="field.type" 
     placeholder="type"> 
</div> 
</div> 

Answer 1

Je trouve une solution qui est pas très agréable:

• fichier HTML: dans la balise select j'ai ajouté le fichier #typeField
• TS: J'ai changé la méthode onChange comme ci-dessous:

app.component.ts

import {Component} from 'angular2/core'; 


import {Types} from './types'; 

@Component({ 
    selector: 'my-app', 
    templateUrl:'./app/app.component.html' 
}) 

export class AppComponent { 

    field:any = {}; 

    types:Array<string> = Types; 

    onChange(event:Event, newValue:any) { 
    this.field.type = newValue; 
    console.log(this.field.type); 
    } 
} 

app.component.html

<h1>My First Angular 2 App</h1> 

<div class="form-group"> 
<label class="col-sm-2 control-label"> Select </label> 
<div class="col-sm-4"> 

<select class="form-control" 
     [(ngModel)]="field.type" 
     #typeField 
     (change)="onChange($event, typeField.value)" 
     title="Type"> 
    <option *ngFor="#t of types">{{ t }}</option> 
</select> 
</div> 

<hr/> 

<label class="col-sm-2 control-label"> Input </label> 
<div class="col-sm-4"> 
    <input type="text" 
     class="form-control input-sm" 
     [(ngModel)]="field.type" 
     placeholder="type"> 
</div> 
</div>