We help IT Professionals succeed at work.

Can't bind to 'ngModel' since it isn't a known property of 'input'. ("

Medium Priority
236 Views
Last Modified: 2019-10-14
error in my angular hi am geting this error
compiler.js:2175 Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
           placeholder="Add New Task"
           (keyup.enter)="onTaskAdd($event)"
           [ERROR ->][(ngModel)]="addTaskValue"/>
</div>
"): ng:///AppModule/TasksAddComponent.html@5:11
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11388)
    at JitCompiler._parseTemplate (compiler.js:25961)
    at JitCompiler._compileTemplate (compiler.js:25949)
    at compiler.js:25893
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25893)
    at compiler.js:25806
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25805)
syntaxError @ compiler.js:2175
parse @ compiler.js:11388
_parseTemplate @ compiler.js:25961
_compileTemplate @ compiler.js:25949
(anonymous) @ compiler.js:25893
_compileComponents @ compiler.js:25893
(anonymous) @ compiler.js:25806
then @ compiler.js:2166
_compileModuleAndComponents @ compiler.js:25805
compileModuleAsync @ compiler.js:25767
compileModuleAsync @ platform-browser-dynamic.js:223
compileNgModuleFactory__PRE_R3__ @ core.js:40263
bootstrapModule @ core.js:40598
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:12
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
localhost/:1 Unchecked runtime.lastError: The message port closed before a response was received.

this my code
onTaskAdd(event) {
        const task: Task = new Task(event.target.value, false, this.getTodayAsString());
        this.taskService.addTask(task)
            .subscribe(
                (newTask: Task[]) => {
                    this.addTaskValue = ' ';
                    for (let i = 0 ; i < newTask.length ; i++) {
                        this.taskService.onTaskAdded.emit(newTask[i]);
                    }
                    console.log('added');
                }
            );

my html is
<div class="form-group">
    <input type="text"
           class="form-control"
           placeholder="Add New Task"
           (keyup.enter)="onTaskAdd($event)"
           [(ngModel)]="addTaskValue"/>
</div>

Open in new window



erro9
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
Have you added your FormsModule to your app.module.ts?
import { FormsModule } from '@angular/forms'; // <=== HERE
...
@NgModule({
  declarations: [
   ...
  ],
  imports: [
    ...
    FormsModule, // <=== AND HERE
    ...
  ],
  providers: [
  ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open in new window

Author

Commented:
yes
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TasksComponent } from './tasks/tasks.component';
import { TasksAddComponent } from './tasks/tasks-add/tasks-add.component';
import { TasksListComponent } from './tasks/tasks-list/tasks-list.component';

@NgModule({
  declarations: [
    AppComponent,
    TasksComponent,
    TasksAddComponent,
    TasksListComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open in new window

Author

Commented:
am geting this error
formsforms23.jpg

Author

Commented:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TasksComponent } from './tasks/tasks.component';
import { TasksAddComponent } from './tasks/tasks-add/tasks-add.component';
import { TasksListComponent } from './tasks/tasks-list/tasks-list.component';
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    TasksComponent,
    TasksAddComponent,
    TasksListComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open in new window

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
am geting this error
Because you did not add it to your imports section (see my earlier post)
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TasksComponent } from './tasks/tasks.component';
import { TasksAddComponent } from './tasks/tasks-add/tasks-add.component';
import { TasksListComponent } from './tasks/tasks-list/tasks-list.component';
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    TasksComponent,
    TasksAddComponent,
    TasksListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule, // <=== AND HERE
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open in new window