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


296

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?


28
Você precisa adicionar FormsModuleao imports: []módulo em que você usa ngModel. Caso contrário, publique seu código.
Günter Zöchbauer 08/04

9
Não consigo pensar que todos os novos desenvolvedores do Angular 2 e 4 vão acertar exatamente esse problema (inclusive eu). Quando foi a última vez que você usou o Angular e não quis usar o ngModel em algum lugar? Eu não entendo por que FormsModule não é apenas incluído por padrão ....
Mike Gledhill

Pelo que vale, encontrei esse erro no IONIC-4 (4.11.0) ao trabalhar com a Validação de formulários. Se eu não fizer nada além de adicionar formControlName = "myControl" a qualquer <ion-input> em qualquer lugar do formulário, recebo a mensagem de erro de ligação ngModel. Propriedades alternativas, como formControlName1 = "myControl", não causam esse erro.
Memetican 14/03/19

Respostas:


675

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


27
Qual é a relação entre ngModel e FormsModule? No entanto, isso não está funcionando para mim.
Govind

4
FormsModule fornece diretivas adicionais sobre os elementos do formulário, incluindo entrada, seleção etc. É por isso que é necessário. Não se esqueça de importar FormsModule no mesmo módulo que declara seus componentes que contêm ligações de elementos de formulário.
Bob

1
O que fazemos se estiver usando isso em um arquivo ts do componente?
Mike Warren

1
você não deve importar o componente
inside.ts

@ Sajeetharan, e se eu tiver um modelo no meu Component que use o ng-model em algum elemento do formulário?
CJBrew 10/0118

18

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 segundo passo é alterar o app.component.ts ?
Konrad Viltersten

8

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 ]
 })

7

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();
}));

5

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á.


4

Em app.module.tsacrescentar o seguinte:

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

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

6
Que valor adicional essa resposta agrega às respostas existentes?
Günter Zöchbauer 23/08

4
não agrega valor à resposta e o formato do código está incorreto. Confuso para iniciante.
Ssmsnet 11/09/17

3
Embora esse trecho de código possa resolver a questão, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.
Clijsters

3

insira a descrição da imagem aquiEu 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. insira a descrição da imagem aqui


2

Tente adicionar

ngModel no nível do módulo

O código é o mesmo que o acima


2

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.


2

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.


Sim, isso aconteceu comigo também ... Modelo! = Módulo Por que isso não entra no meu cérebro!
Rahul Sonwanshi 03/02

1

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 ...


1

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


1

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">

Usei o formulário em html e o módulo de formulários importados em app.madule.ts, como importar {FormsModule} de '@ angular / forms' e adicionar esse FormsModule nas importações.
Brahmmeswara Rao Palepu

1

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

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


1

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


0

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
  ],
  [...]
})

0

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" />

0

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.