Erro angular: "Não é possível vincular a 'ngModel', pois não é uma propriedade conhecida de 'input'"

Estou usando o Angular 4 e estou recebendo um erro no console:

Não é possível vincular ao 'ngModel', pois não é uma propriedade conhecida de 'input'

Como posso resolver isto?

Para usar a ligação de dados bidirecional para entradas de formulário, você precisa importar o FormsModulepacote no seu módulo Angular.

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

@NgModule({
    imports: [
         FormsModule      
    ]

EDITAR

Como existem muitas perguntas duplicadas com o mesmo problema, estou aprimorando esta resposta.

Existem duas razões possíveis

• Em falta FormsModule, portanto, adicione isso ao seu módulo,

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
      imports: [
          FormsModule      
      ]

• Verifique a sintaxe / ortografia [(ngModel)]na tag de entrada

Esta é uma resposta certa. você precisa importar o FormsMoudle

primeiro em app.module.ts

**

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule  } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule ,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

** segundo em app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        FormsModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

Cumprimentos e esperança serão úteis

O seu ngModelnão está funcionando porque ainda não faz parte do seu NgModule.

Você precisa informar NgModuleque possui autoridade para usar em ngModeltodo o aplicativo. Você pode fazer isso adicionando FormsModuleem seu app.module.ts-> imports-> [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })

Corri para esse erro ao testar meu Angular 6 App com Karma / Jasmine. Eu já havia importado FormsModuleno meu módulo de nível superior. Mas quando adicionei um novo componente que usou [(ngModel)]meus testes começaram a falhar. Nesse caso, eu precisava importar FormsModuleno meu TestBed TestingModule.

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule
    ],
    declarations: [
      RegisterComponent
    ]
  })
  .compileComponents();
}));

Todas as soluções acima mencionadas para o problema estão corretas. Mas se você estiver usando carregamento lento, FormsModuleprecisará ser importado no módulo filho que possui formulários. Adicioná-lo app.module.tsnão ajudará.

Em app.module.tsacrescentar o seguinte:

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

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

Eu tentei todas as coisas mencionadas acima, mas ainda não está funcionando.

mas finalmente encontrei o problema no site Angular. Tente importar o formModule no module.ts.

Tente adicionar

ngModel no nível do módulo

O código é o mesmo que o acima

Atualize com o Angular 7.xx , encontre o mesmo problema em um dos meus módulos .

Se estiver no seu módulo independente, adicione estes módulos extras:

import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [CommonModule, FormsModule], // the order can be random now;
  ...
})

Se estiver no seu app.module.ts, adicione estes módulos:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ FormsModule, BrowserModule ], // order can be random now
  ...
})

Uma demonstração simples para provar o caso.

A resposta para mim foi escrita incorretamente ngModel. Eu escrevi assim: ngModuleenquanto deveria ngModel.

Todas as outras tentativas obviamente falharam em resolver o erro para mim.

import { FormsModule } from '@angular/forms'; // <<<< importe-o aqui

BrowserModule, FormsModule // <<<< e aqui

Então, basta procurar app.module.tsou outro arquivo de módulo e certificar-se de ter FormsModuleimportado ...

No meu caso, adicionei a importação ausente, que era a ReactiveFormsModule.

módulo de formulário de importação em app.module.ts.

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


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,HttpModule,FormsModule     //Add here form  module
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Em html:

<input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">

No meu caso eu mal escrito, eu estava me referindo como ngmodel istead de ng M odelo :) Espero que ajude!

Esperado - [(ngModel)] Real - [(ngmodel)]

Você deve verificar as seguintes coisas se a ligação bidirecional não funcionar.

Em html, o ngModel deve ser chamado dessa maneira. Não há dependência em outro atributo do elemento de entrada

<input [(ngModel)]="inputText">

O Make Sure FormsModule é importado para o arquivo de módulos app.modules.ts

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

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent // suppose, this is the component in which you are trying to use two ay binding
    ],
    imports: [
        BrowserModule,
        FormsModule,
        // other modules
],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Certifique-se de que o componente no qual você está tentando usar o ngModel para ligação bidirecional seja adicionado nas declarações do. Código adicionado no ponto anterior # 2

Isso é tudo o que você precisa fazer para que a ligação bidirecional usando o ngModel funcione. Isso é validado até 9

Se você quiser usar a ligação de dados bidirecional para entradas de formulário, precisará importar o pacote FormsModule no seu módulo Angular. Para mais informações, consulte o tutorial oficial do Angular 2 aqui e a documentação oficial dos formulários

no app.module.ts, adicione as linhas abaixo:

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

[...]

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

primeiro importe FormsModule e, em seguida, use ngModel em seu component.ts

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

Código HTML:

<input type='text' [(ngModel)] ="usertext" />

Se mesmo após a importação do módulo de formulários o problema persistir, verifique se a sua Entrada não possui um atributo "nome" com valor igual a outra entrada na página.