Can’t bind to 'ngModel' Since it isn’t a known Property of 'input'

Asked

Viewed 17,539 times

7

I’m with [(ngModel)]="cliente.nome" this code keeps generating the error of:

Can't bind to 'ngModel' since it isn't a known property of 'input'. ("="col-md-4 control-label" for="idNome">Nome: </label>

And I’ve already put Formmodule on app.modulets., but even if the error persists, it follows the structure of the project:
app.modulets.:

 import { FormsModule }   from '@angular/forms';
   @NgModule({
  declarations: [ AppComponent], 
  imports: [
   ...
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

the app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes), ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

the service.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AtendimentoRoutingModule } from './atendimento-routing.module';
import { AtendimentoComponent } from './atendimento/atendimento.component';

@NgModule({
  imports: [
    CommonModule,
    AtendimentoRoutingModule
  ],
  declarations: [AtendimentoComponent]
})
export class AtendimentoModule { }

And the service.component.ts:

 import { Component, OnInit } from '@angular/core';
import { AtendimentoService } from '../atendimento.service';

import { Cliente } from '../../cliente/Cliente'
@Component({
  selector: 'app-atendimento',
  templateUrl: './atendimento.component.html',
  styleUrls: ['./atendimento.component.css'],
  providers: [AtendimentoService, Cliente]
})
export class AtendimentoComponent implements OnInit {

2 answers

19


I found the error in my code, I just added the

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

Within my service.module.ts, thus getting import { Ngmodule } from

 '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule }   from '@angular/forms';  // Adicionei aqui
    import { AtendimentoRoutingModule } from './atendimento-routing.module';
    import { AtendimentoComponent } from './atendimento/atendimento.component';

    @NgModule({
      imports: [
        CommonModule,
        AtendimentoRoutingModule,
        FormsModule // Adicionei aqui
      ],
      declarations: [AtendimentoComponent]
    })
    export class AtendimentoModule { }

0

If after importing FormsModule the problem persist, check if there is no <input> with the same name of another within your HTML. Below I leave an example explaining what I say, see the attribute name.

Example with problem:

<input ... name="sampleName" [(ngModel)]="myObj"/>
<input ... name="sampleName" [(ngModel)]="myOtherObj"/>

Revised example:

<input ... name="sampleName" [(ngModel)]="myObj"/>
<input ... name="myOtherSampleName" [(ngModel)]="myOtherObj"/>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.