Angular2 Two way bindings doesn't work on Firefox

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>

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

I found a solution which is not very nice : HTML file : in the select tag I added #typeField TS file : I changed the onChange method like below : 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>… Read more »