Home/ Questions/How to fix the prroblem: can't bind to 'ngmodel' since it isn't a known property of 'input'?
Next
Answered
Skyla Wilderman
  • 3
Asked: 2022-06-20T09:44:27+00:00 In:

How to fix the prroblem: can’t bind to ‘ngmodel’ since it isn’t a known property of ‘input’?

  • 3

. Advertisement .

..3..

. Advertisement .

..4..

The Angular application experienced this problem when handling form input text fields:

Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.
And my detail code below:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
username: string = '';
clickme() {
console.log('it does nothing',username);
}
}

app.component.ts

<p><input type="text" id="username" name="username" [(ngModel)]="username"></p>
<h1> {{username}}</h1>

<button type="button" (click)="clickme()">Clickme</button>

I’m in a hurry need this fix fast. Looking forward to getting an answer to find out the cause of the problem and everyone’s advice on how to fix it ASAP?

Share

1 Answer

  1. Best Answer
    Expert

    The cause: The ngModel directive, which is used for two-way data binding data from the component to the template in the Angular application, throws this error when added to the input component.

    These common things need to check as:

    -Missing FormModule

    -Spelling of NgModel attribute

    -ReactiveModule

    -Using Lazy Loaded modules

    Solution:

    1.Solution for missing FormModule
    NgModule will be informed that ngModel is available when FormsModule is imported into the application module.

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

    Access app.module.ts and change:

    -from

    imports: [
BrowserModule,
],

    – to

    ```markup
imports: [
BrowserModule,
FormsModule
],
    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

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

    2. Solution for NgModel attribute spelling check
    Make sure the ngModel attribute’s syntax is defined correctly by using [(ngModel)]. And make sure to double-check a variable that was declared in Component as well as the spelling.

    3. Solution for Importing ReactiveModule: if you are using reactive forms, import ReactiveModule to fix this.

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

@NgModule({
  declarations: [

  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

    4. Solution for Lazy Loaded modules

    You must import FormsModule and ReactiveFormsModule in each child module rather than the parent module if your application utilises lazy loaded modules.

    • 3

Leave an answer

You must login to add an answer.

Need An Account,