Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I've got the following error when launching my Angular app, even if the component is not displayed.

I have to comment out the <input> so that my app works.

zone.js:461 Unhandled Promise rejection: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. ("    <div>       <label>Created:</label>       <input  type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />    </div> </div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value:  

I'm looking at the Hero plunker, but I don't see any difference from my code.

Here is the component file:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Intervention } from '../../model/intervention';  @Component({    selector: 'intervention-details',    templateUrl: 'app/intervention/details/intervention.details.html',    styleUrls: ['app/intervention/details/intervention.details.css'] })  export class InterventionDetails {    @Input() intervention: Intervention;     public test : string = "toto"; } 
like image 507
Anthony Brenelière Avatar asked Aug 11 '16 09:08

Anthony Brenelière


People also ask

Can't bind to ngModel since it isn't a known property?

To fix Can't bind to 'ngModel' since it isn't a known property of 'input' error in Angular applications we have to import FormModule in app. module. ts file. If you are using FormBuilder class to create reactive form we have to import ReactiveFormsModule as well to avoid below error.

Can't bind since it isn't a known property?

What does "Can't bind to 'x' since it isn't a known property of 'y'" mean? link. This error often means that you haven't declared the directive "x" or haven't imported the NgModule to which "x" belongs. Perhaps you declared "x" in an application sub-module but forgot to export it.

Can't bind to ngModel since it isn't a known property of mat select?

Your ngModel is not working because it's not a part of your NgModule yet. You have to tell the NgModule that you have authority to use ngModel throughout your app, You can do it by adding FormsModule into your app. module. ts -> imports -> [] .


1 Answers

Yes, that's it. In the app.module.ts file, I just added:

import { FormsModule } from '@angular/forms';  [...]  @NgModule({   imports: [     [...]     FormsModule   ],   [...] }) 
like image 108
Anthony Brenelière Avatar answered Sep 20 '22 10:09

Anthony Brenelière