Home/ Questions/Q 393
Next
In Process

WikiQuora Latest Questions

W3spoint99
  • 0
  • 0
Begginer
Asked: 2025-01-17T13:57:47+00:00 In:

Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’?

  • 0
  • 0

Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’?

I have this simple input in my component which uses [(ngModel)] :

<input type="text" [(ngModel)]="test" placeholder="foo" />

And I get the following error when I launch my app, even if the component is not displayed.

zone.js:461 Unhandled Promise rejection: Template parse errors: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

Here is the component.ts:

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";
}
angularangular formangular template form
Share

2 Answers

  1. Saralyn
    Begginer

    For using [(ngModel)] in Angular 2, 4 & 5+, you need to import FormsModule from Angular form…

    Also, it is in this path under forms in the Angular repository on GitHub:

    angular / packages / forms / src / directives / ng_model.ts

    Probably this is not a very pleasurable for the AngularJS developers as you could use ng-model everywhere anytime before, but as Angular tries to separate modules to use whatever you’d like you to want to use at the time, ngModel is in FormsModule now.

    Also, if you are using ReactiveFormsModule it needs to import it too.

    So simply look for app.module.ts and make sure you have FormsModule imported in…

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  // <<<< import it here
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule // <<<< And here
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

    Also, these are the current starting comments for Angular4 ngModel in FormsModule:

    /**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input [(ngModel)]="myValue" #myModel="ngModel">
 * ```
 * I.e. `ngModel` can export itself on the element and then be used in the template.
 * Normally, this would result in expressions before the `input` that use the exported directive
 * to have and old value as they have been
 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
 * detection run.
 *
 * Notes:
 * - this is just one extra run no matter how many `ngModel` have been changed.
 * - this is a general problem when using `exportAs` for directives!
 */

    If you’d like to use your input, not in a form, you can use it with ngModelOptions and make standalone true…

    [ngModelOptions]="{standalone: true}"
  2. Saralyn
    Begginer

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

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

Leave an answer

You must login to add an answer.

Need An Account,