Angular2 Two way bindings doesn't work on Firefox

Question

I am a newee using Angular 2. I developped some forms with Typesript and it is working with Chrome but doesn't with FireFox (version 45). First of all, I tried the "two way" data bindings with both browsers : Chrome has a correct behavior but FireFox doesn't take in consideration the binding with ngModel (Find my exemple based on 5 min quickstart of angular2).

In addition, the datepicker of bootstrap works well on Chrome and NOT on Firefox.

Thanks in advance,

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

我找到了一个不非常好的解决方案：

• HTML文件：我在select标签中添加了#typeField
• TS文件：我更改了onChange方法，如下所示：

<强> 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>