error TS2322: Type 'Event' is not assignable to type 'string'. [(ngModel)]="todoItem" (keyup) ="addTodo()"

Question

I'm trying to bind my input to be able to display string. But I've this error:

Error: list.component.html:3:15 - error TS2322: Type 'Event' is not assignable to type 'string'. .

3 [(ngModel)]="todoItem" ~~~~~~~~~ 4 (keyup) ="addTodo()"

src/app/components/todo-list/todo-list.component.ts:5:16
  5   templateUrl: './todo-list.component.html',




todo-list.componentn.html :


    <input type="text"
   placeholder="What needs to be done" 
   [(ngModel)]="todoItem"
   />
  
      <div class="item-left"  *ngFor="let todo of todos">
          <input type='checkbox' >
          <p>{{todo.title}}</p>
      </div>

todo-list.component.ts:

  
  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-todo-list',
    templateUrl: './todo-list.component.html',
    styleUrls: ['./todo-list.component.css'],
  })
  export class TodoListComponent implements OnInit {
    todos!: Todos[];
    todoItem!: string;
    constructor() {}
  
    ngOnInit(): void {
      this.todoItem = '';
      this.todos = [
        {
          id: 1,
          title: 'Surya',
        },
      ];
    }
 
  }

//interface to help with type error

  interface Todos {
    id: number;
    title: string;
  }

Answer 1

May be import the FormsModule in app.module.ts can solve this problem.

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

Save and ng serve the project.

Answer 2

ngModel is defined in the Forms module and by default, it is not imported, so if you want to build any kind of form or wanna use ngModel you need to explicitly import it.

In app.Module.ts you need to do this.

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

Answer 3

I am using custom modules. So for me I added:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { MyComponent } from './mycomponent.component'
import { SomeOtherComponent } from './components/someother.component'

@NgModule({
  declarations: [
    MyComponent,
    SomeOtherComponent
  ],
  imports: [
    CommonModule,
    RealtorToolsRoutingModule,
    FormsModule
  ]
})
export class MyModule{ }

I added the Forms module in the parent Module, and the child components inherited the FormsModule.

This is an alternative to adding FormsModule to the app.module.ts

Answer 4

I also faced this issue. I have already imported FormsModule in app.module. Even after that, I got the error "can't bind ngModel, it is not a known property of input". I was confused and spent lot of time in this. Luckily, I found I haven't imported the component in my app.module. I used CLI only to generate the component. But I am not sure why it has not added to App Module. Usually, it does.

So, if you face this issue, it is worth to check once in app.module whether the component has been added into the declaration array.

Adding in declaration array, fixed my problem.

Answer 5

Make sure you add FormsModule in any other sub module different from the app module, especially when you're using the ngModel in a component of that sub module. Put it in the import array of the module

Answer 6

The cause of this error I faced is not exactly the same cause of theerror in the question. But since it is the same error report I think it would be helpful to share.

I also faced this issue, while working with angular 12. I have already imported FormsModule in app.module. Even after that, I got the error "Type 'Event' is not assignable to type 'string'.". I was confused. Luckily, I found that is was a simple typo, turned out that the error message was not very helpful at that point; I had used [(NgModel)] instead of [(ngModel)] By simply correcting this typo the error was gone.

Answer 7

In my case it was ReactiveFormsModule that was missing in my module:

import { ReactiveFormsModule } from '@angular/forms';

...

  imports: [
     ...
     ReactiveFormsModule,
     ...
  ]

Answer 8

check the component module exist in app.module.ts file

Answer 9

Include ReactiveFormsModule in your app.module.ts.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

imports: [BrowserModule, FormsModule, ReactiveFormsModule, AppRoutingModule],

Answer 10

While most of the times it really is a missing FormsModule import,
I had a case where public-api.ts was missing the library's module export.

Adding

export * from './lib/my-library.module';

to public-api.ts fixed this error for that particular case.

Answer 11

I faced the error. Those who are suggesting import from FormsModule are correct but there are other reason for this error.

My case was, I imported a component in something-routing.module.ts but didn't import it previously in something.module.ts and also didn't mention the component in something.module.ts declaration array. Do this two things and it should be resolved.

Answer 12

If you have imported FormsModule and it is still not working look at the router:

loadChildren: () => ...

And watch out that you don't accidentaly put lazy-routing.module.ts instead of lazy.module.ts.

lazy-routing.module.ts still works but not if you try to use imports.