error TS2322: Type 'Event' is not assignable to type 'boolean'

Question

I‘m writing a todolist demo. When ng serve it, it shows an error:

Error: src/app/app.component.html:17:58 - error TS2322: Type 'Event' is not assignable to type 'boolean'.
17  <input class="toggle" type="checkbox" [(ngModule)]="todo.isDone" >
                                                       ~~~~~~~~~~~~~~
18 
19  <label>{{ todo.title }}</label>
   ~~

Also all items not be checked.(even their isDone status is true)

I def an object in app.component.ts.

public todos:{
    id:number,
    title: string,
    isDone: boolean
  }[]=todos

const todos=[
  {
  id:1,
  title:'study',
  isDone:true
},{
  id:2,
  title:'sleep',
  isDone:true
},{
  id:3,
  title:'drink',
  isDone:true
}
]

app.component.html as below.

<li *ngFor="let todo of todos">
                <div class="view">
                    <input class="toggle" type="checkbox" [(ngModule)]="todo.isDone" >
                    <label>{{ todo.title }}</label>
                    <button class="destroy"></button>
                </div>
                <input class="edit" value="Create a TodoMVC template">
            </li>

Can anyone see what I'm doing wrong? thanks!

Answer 1

When I got this error, it was because I forgot to import the FormsModule in app.module.ts. So in app.module.ts:

import { FormsModule } from '@angular/forms';
...
imports: [
..,
FormsModule
],

Answer 2

change you code from <input class="toggle" type="checkbox" [(ngModule)]="todo.isDone" > to this...

<input class="toggle" type="checkbox" [(ngModel)]="todo.isDone" >

Here, ngModule is not recognizing..