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;
}
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.
check the component module exist in app.module.ts file
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
]
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
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.
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
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.
In my case it was ReactiveFormsModule that was missing in my module:
import { ReactiveFormsModule } from '@angular/forms';
...
imports: [
...
ReactiveFormsModule,
...
]
Include ReactiveFormsModule in your app.module.ts.
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
imports: [BrowserModule, FormsModule, ReactiveFormsModule, AppRoutingModule],
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.