Why doesnt two-way binding [(ngModel)] work in Angular 2.1.1?

Question

When I try to use:

<input [(ngModel)]="model.name" >

my code breaks and I get the following error:

Error: Template parse errors:

However, when I implement two-way binding in a different way, it works.

This is the code that works:

<input [value]="model.name" (input)="model.name=$event.target.value">

I am following the instructions located https://angular.io/docs/ts/latest/guide/template-syntax.html#!#two-way

Does anyone know if this is an error in the current RC of Angular or am I doing something wrong?

Here is a screenshot of the errors as requested:

(anonymous function)    @   main.bundle.js:39182
ZoneDelegate.invoke @   zone.js:232
Zone.run    @   zone.js:114
(anonymous function)    @   zone.js:502
ZoneDelegate.invokeTask @   zone.js:265
Zone.runTask    @   zone.js:154
drainMicroTaskQueue @   zone.js:401
ZoneTask.invoke @   zone.js:339

Here is what my app.module.ts file looks like:

import { NgModule, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { removeNgStyles, createNewHosts, createInputTransfer } from '@angularclass/hmr';

/*
 * Platform and Environment providers/directives/pipes
 */
import { ENV_PROVIDERS } from './environment';
import { routing } from './app.routing';

// App is our top level component
import { App } from './app.component';
import { AppState, InternalStateType } from './app.service';
import { GlobalState } from './global.state';
import { NgaModule } from './theme/nga.module';
import { PagesModule } from './pages/pages.module';

// import { JpsInputComponent } from './theme/components/jps-input/jps-input.component';

import { SharedModule } from './shared/shared.module';

// Application wide providers
const APP_PROVIDERS = [
  AppState,
  GlobalState
];

type StoreType = {
  state: InternalStateType,
  restoreInputValues: () => void,
  disposeOldHosts: () => void
};

/**
 * `AppModule` is the main entry point into Angular2's bootstraping process
 */
@NgModule({
  bootstrap: [App],
  declarations: [
    App,
    // JpsInputComponent
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    HttpModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    NgaModule.forRoot(),
    PagesModule,
    SharedModule,
    routing
  ],
  providers: [ // expose our Services and Providers into Angular's dependency injection
    ENV_PROVIDERS,
    APP_PROVIDERS
  ],
  exports: [
    // JpsInputComponent
  ]
})

export class AppModule {

  constructor(public appRef: ApplicationRef, public appState: AppState) {
  }

  hmrOnInit(store: StoreType) {
    if (!store || !store.state) return;
    console.log('HMR store', JSON.stringify(store, null, 2));
    // set state
    this.appState._state = store.state;
    // set input values
    if ('restoreInputValues' in store) {
      let restoreInputValues = store.restoreInputValues;
      setTimeout(restoreInputValues);
    }
    this.appRef.tick();
    delete store.state;
    delete store.restoreInputValues;
  }

  hmrOnDestroy(store: StoreType) {
    const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
    // save state
    const state = this.appState._state;
    store.state = state;
    // recreate root elements
    store.disposeOldHosts = createNewHosts(cmpLocation);
    // save input values
    store.restoreInputValues = createInputTransfer();
    // remove styles
    removeNgStyles();
  }

  hmrAfterDestroy(store: StoreType) {
    // display new elements
    store.disposeOldHosts();
    delete store.disposeOldHosts;
  }
}

Here is the component template file:

<form>
  <div class="input-group">
    <input type="text" class="form-control with-danger-addon">
    <span class="input-group-btn">
        <button class="btn btn-danger" type="submit">Go!</button>
    </span>
  </div>

  {{ model.name }}

  <input [(ngModel)]="model.name">


</form>

Here is the component typescript file:

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

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

    model = {
      name: 'This is the persons name'
    };

    constructor() {

    }

    ngOnInit() {
        console.log('Number Intake System Loaded');
    }


}

I am using this project as a base: https://github.com/akveo/ng2-admin

Answer 1

Your input element needs a name. From https://angular.io/docs/ts/latest/guide/forms.html

Defining a name attribute is a requirement when using [(ngModel)] in combination with a form

Answer 2

i suspect you forget to import the FormsModule into your current NgModule. ngModel is not available by default.

import {FormsModule} from '@angular/forms';
import {NgModule} from '@angular/core';
@NgModule({
    declarations: [
        ...
    ],
    imports: [
        FormsModule,
        BrowserModule,
    ],
    bootstrap: [...]
})
export class AppModule {
}