I've been looking at this code for a bit now and I'm stuck: I have a form that I'm binding to a component model and the [(ngModel)]
binding breaks the page - the page won't render. I get no compilation error and no runtime debugger error, but the page won't render.
On this page it appears the model is working fine - I can see the model value fine with {{todo.title}}
but when I try to bind the value to a form control with [(ngModel)]="todo.title" the application breaks.
Here's the form:
<form name="form1" id="form1" novalidate>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-bookmark"></i> </span>
<input class="form-control"
name="title"
[(ngModel)]="todo.title"
placeholder="Enter the title for this ToDo"
required >
</div>
</div>
</form>
and the super simple components:
import { Component } from '@angular/core';
import { ToDo } from './todo';
import { ToDoListComponent } from './todo-list';
@Component({
selector: 'todo-entry',
templateUrl: 'app/todo-entry.html'
})
export class ToDoEntryComponent {
todo:ToDo = new ToDo();
new() {
this.todo = new ToDo();
}
}
and:
import { Component } from '@angular/core';
@Component({})
export class ToDo {
title:string = "new todo";
entered:Date = new Date();
}
The code works (one way anyway) if I use:
value="{{todo.title}}"
I'm pretty sure the module loading and component references are all correct as everything else works as expected displaying model values, as long as I don't use [(ngModel)].
Any ideas what I'm missing here?