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


1379

Eu recebi o seguinte erro ao iniciar meu aplicativo Angular, mesmo que o componente não seja exibido.

Eu tenho que comentar o <input>para que meu aplicativo funcione.

zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
   <div>
      <label>Created:</label>
      <input  type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
   </div>
</div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value: 

Estou olhando para o afunilador Hero, mas não vejo diferença no meu código.

Aqui está o arquivo do componente:

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

11
O que é o herói plucker?
IronAces

3
Estou tendo o mesmo problema desde que eles atualizaram para o rc5 ontem (curiosamente, ele funciona para o meu colega ..) Acho que @abreneliere está falando sobre os tutoriais deles - angular.io/docs/ts/latest/tutorial
PetLahev

4
@DanielShillcock, plunker do Tour of Heroes .
precisa saber é o seguinte

2
Sim, eu me referi ao tutorial do Tour of heroes porque ele usa um ngModel.
Anthony Brenelière

5
Estou apenas olhando Angular e vi esse erro ao fazer o tutorial do Tour of Heroes. Com certeza, eles agora chamam isso na linha seguinte e dizem como / por que corrigi-lo.
precisa

Respostas:


1925

Sim, é isso, no app.module.ts, acabei de adicionar:

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

[...]

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

14
Na verdade, prefiro esta resposta à de Gabriele (que é apenas um link). Aqui, o código exato é apresentado. Irritantemente, encontrei esse problema logo após a "Introdução ao Angular 2" de John Paps no PluralSight, e esse problema nem foi mencionado. Para eles, a ligação bidirecional funcionou.
Mike Gledhill

20
Isso funcionou, mas somente depois que o importei para o meu submódulo. Não está totalmente claro para iniciantes que isso não é herdado pelos submódulos.
Adam0101

3
No meu caso, meu uso de aparelho estava errado. Eu estava usando [{ngModel}]em vez do correto:[(ngModel)]
Imtiaz

29
Para aqueles que encontrarem isso por causa de uma falha semelhante com o Jasmine, você precisará adicionar essas importações também ao component.spec.tsarquivo.
theMayer

3
E para onde colocá-lo (em relação ao erro do Jasmine): stackoverflow.com/questions/39584534/…
bagsmode

534

Para poder usar a ligação de dados bidirecional para entradas de formulário, você precisa importar o FormsModulepacote no seu Angularmódulo. Para mais informações, consulte o Angular 2tutorial oficial aqui e a documentação oficial dos formulários


9
Eu tenho que admitir que eu comecei com o Angular na segunda-feira (há 4 dias) e estava fazendo seus tutoriais, por isso tenho certeza de que fiz algo errado, mas importar o FormsModule não funcionou. Então eu adicionei import { FORM_DIRECTIVES } from '@angular/forms';e acrescentou o FORM_DIRECTIVEScom as directivas e sim a minha ligação está funcionando novamente (Para ser claro que estava trabalhando antes do lançamento rc5)
PetLahev

2
O que parece estar relacionado a este stackoverflow.com/questions/31623879/…
PetLahev

1
@PetLahev, o problema que você está tendo com o tutorial é que, em 7 de agosto, quando você começou, os tutoriais estavam executando o Release Candidate 4. A partir de 8 de agosto, eles estavam no Release Candidate 5, que tem sintaxe diferente
AJ Zane

5
FORM_DIRECTIVESestão mortos por precaução #
Toolkit

6
Não vale nada que, se você estiver usando um SharedModule, talvez seja necessário importar o FormsModule para lá também.
Difinity

243

Para usar [(ngModel)]no Angular 2 , 4 e 5+ , você precisa importar o FormsModule do formulário Angular ...

Também está neste caminho em formulários no repositório Angular no github :

angular / pacotes / formulários / src / diretivas / ng_model.ts

Provavelmente, isso não é muito prazeroso para os desenvolvedores do AngularJs, já que você pode usar o ng-model em qualquer lugar a qualquer momento, mas como o Angular tenta separar os módulos para usar o que você gostaria que você usasse naquele momento, o ngModel está no FormsModule agora .

Além disso, se você estiver usando o ReactiveFormsModule, também precisará importá-lo.

Então, basta procurar app.module.ts e certificar-se de ter FormsModuleimportado ...

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 { }

Além disso, este é os comentários iniciais atuais para Angular4 ngModelno 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!
 */

Se você deseja usar sua entrada, não em um formulário, pode usá-la com ngModelOptionse tornar autônoma verdadeira ...

[ngModelOptions]="{standalone: true}"

Para mais informações, consulte ng_model na seção Angular aqui


95

Você precisa importar o FormsModule

Abra app.module.ts

e adicione linha

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

e

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

54

Jogar isso pode ajudar alguém.

Supondo que você tenha criado um novo NgModule, por exemplo, AuthModulededicado a lidar com suas necessidades de Auth, certifique-se de importar tambémFormsModule nesse AuthModule .

Se você usar o FormsModuleONLY no AuthModule, não precisará importar o FormModuleIN padrãoAppModule

Então, algo assim no AuthModule:

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

import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';

@NgModule({
  imports:      [ 
    authRouting,
    FormsModule
   ],
  declarations: [ 
    SignupComponent,
    LoginComponent
  ]
})
export class AuthModule { }

Em seguida, esqueça de importar AppModulese você não usar o FormsModuleoutro lugar.


Eu precisava dele no submódulo em que estava usando os recursos do formulário. No alto da hierarquia não era suficiente.
Zarepheth 29/11

45

Soultion simples: em app.module.ts

Exemplo 1

import {FormsModule} from "@angular/forms";  
// add in imports 

imports: [
 BrowserModule,
 FormsModule
 ],

Exemplo 2

Se você quiser usar [(ngModel)], precisará importar o FormsModule em app.module.ts

import { FormsModule  } from "@angular/forms";     
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective, 
  ],
  imports: [
    BrowserModule,  FormsModule

  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }

28
Onde exatamente está a diferença nos dois exemplos?
Philipp Meissner

no meu caso, tive que importar FormsModule no meu component.module.ts
ISFO 5/19

40

Importe o FormsModule nos módulos em que deseja usar o [(ngModel)]

insira a descrição da imagem aqui


39

Há duas etapas que você precisa seguir para se livrar desse erro

  1. importar FormsModule no seu módulo de aplicativo
  2. Passe como valor das importações no decorador @NgModule

basicamente app.module.ts deve ser parecido abaixo:

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

Espero que ajude


Obrigado! Eu não o havia declarado na seção de importações e isso estava me deixando louco quando mudei um componente para um submódulo.
Richard

30

Você precisa importar o FormsModule no seu módulo raiz se este componente estiver na raiz, por exemplo, app.module.ts

Por favor, abra app.module.ts

Importar FormsModule de @ angular / forms

Ex:

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

e

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

28

Estou usando o Angular 7

Preciso importar ReactiveFormsModule porque estou usando a classe FormBuilder para criar um formulário reativo.

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

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

24

importe FormsModule no seu módulo de aplicativo.

deixaria seu aplicativo rodando bem.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ContactListCopmponent} from './contacts/contact-list.component';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

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

22

Se você precisa usar [(ngModel)]primeiro você precisa importar FormsModuleem app.module.tse em seguida, adicione em uma lista de importações. Algo assim:

app.module.ts

  1. importar import {FormsModule} from "@angular/forms";
  2. adicionar importações imports: [ BrowserModule, FormsModule ],

app.component.ts

  1. Exemplo: <input type="text" [(ngModel)]="name" >
  2. e depois <h1>your name is: {{name}} </h1>

19

ngModel é a parte do FormsModule. E deve ser importado de @ angular / forms para trabalhar com o ngModel.

Altere o app.module.ts da seguinte maneira:

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

[...]

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

18

Se alguém ainda estiver obtendo erros após aplicar a solução aceita, talvez seja porque você possui um arquivo de módulo separado para o componente no qual deseja usar a propriedade ngModel na tag de entrada. Nesse caso, aplique a solução aceita no arquivo module.ts do componente também.


18

Estou usando o Angular 5.

No meu caso, eu precisava importar o RactiveFormsModule também.

app.module.ts (ou anymodule.module.ts)

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],

ReactiveFormsModuleé necessário quando você precisa FormGroup, FormControl ,Validatorsetc. Para usar ngModel, você não precisa ReactiveFormsModule.
Amit Chigadani 22/11

@AmitChigadani Adicionar ReactiveFormModule é a única coisa que cometeu o erro desaparecer no meu caso. Estou usando o Angular 7.
Eternal21

17

Sei que esta pergunta é sobre o Angular 2, mas estou no Angular 4 e nenhuma dessas respostas ajudou.

No Angular 4, a sintaxe precisa ser

[(ngModel)]

Espero que isto ajude.


15

se você ainda estiver recebendo o erro depois de importar o FormsModule corretamente, verifique no seu terminal ou (console do Windows) porque seu projeto não está sendo compilado (por causa de outro erro que possa ser qualquer coisa) e sua solução não foi refletida no seu navegador!

No meu caso, meu console teve o seguinte erro não relacionado: A propriedade 'retrieveGithubUser' não existe no tipo 'ApiService'.


13

No módulo que você deseja usar o ngModel, é necessário importar o FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

Estava faltando isso no meu app.module.ts, obrigado Malindu!
Omzig

11

O ngModel é proveniente do FormsModule. Existem alguns casos em que você pode receber esse tipo de erro:

  1. Você não importou o FormsModule para a matriz de importação do módulo em que seu componente é declarado, componente no qual o ngModel é usado.
  2. Você importou o FormsModule para um módulo que é herdado de outro módulo. Nesse caso, você tem duas opções:
    • deixe o FormsModule importado para a matriz de importação dos dois módulos: module1 e module2. Como regra: a importação de um módulo NÃO fornece acesso aos seus módulos importados (as importações não são herdadas)

insira a descrição da imagem aqui

  • declarar o FormsModule nas matrizes de importação e exportação no módulo1 para poder vê-lo no modelo2 também

insira a descrição da imagem aqui

  1. (Em alguma versão, enfrentei esse problema) Você importou corretamente o FormsModule, mas o problema está na marca HTML de entrada. Você deve adicionar o atributo da tag de nome para entrada e o nome do objeto vinculado em [(ngModel)] deve ser o mesmo que o nome no atributo de nome

    insira a descrição da imagem aqui


11

Em ngModulevocê precisa importar FormsModule, porque ngModelestá vindo FormsModule. Modifique seu app.module.ts como o código abaixo que compartilhei

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

10

importar FormModule um app.module

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

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

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

8

Às vezes, você recebe esse erro ao tentar usar um componente de um módulo, que não é compartilhado, em um módulo diferente.

Por exemplo, você tem 2 módulos com module1.componentA.component.ts e module2.componentC.component.ts e tenta usar o seletor de module1.componentA.component.ts em um modelo dentro de module2 (por exemplo <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">), ele lançará o erro que o someInputVariableInModule1 não está disponível dentro do module1.componentA.component.ts - mesmo que você tenha o @Input() someInputVariableInModule1no module1.componentA.

Se isso acontecer, você deseja compartilhar o module1.componentA para ser acessível em outros módulos. Portanto, se você compartilhar o module1.componentA dentro de um sharedModule, o module1.componentA poderá ser utilizado dentro de outros módulos (fora do módulo1), e todos os módulos que importarem o sharedModule poderão acessar o seletor em seus modelos, injetando a @Input()variável declarada.


1
Eu tenho esse problema exato e você diz que deve compartilhar o módulo para poder usar o componentA no ComponentC. Mas .. Como eu compartilho o module1? Qual é a sintaxe para "compartilhar um módulo"? Imaginei exportação module1 e, em seguida, importá-lo na module2 foi partilha o suficiente, mas continua a ter este problema
Agorilla

2
Então, para me responder, é assim que você compartilha um módulo angular-2-training-book.rangle.io/handout/modules/…
Agorilla

2
Ei, desculpe, eu não vi seu comentário tão rápido :) Sim, é assim que você pode criar um SharedModule e importar seus próprios módulos para lá, que você deseja usar em vários outros módulos. Em seguida, importe o SharedModule para o qual deseja usar o módulo importado no compartilhado.
Guntram

8

Para o meu cenário, eu tive que importar [CommonModule] e [FormsModule] para o meu módulo

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

import { MyComponent } from './mycomponent'

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        MyComponent 
    ]
 }) 
export class MyModule { }

8

Você precisa importar o FormsModule

Abra app.module.ts

e adicione linha

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

e

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

8

Às vezes, se já são importados BrowserModule, FormsModulee outros módulos relacionados que eu tenho o mesmo erro, então eu percebi que nós precisamos importá-los em Ordem , no meu caso eu perdi. Então ordem deve ser como BrowserModule, FormsModule, ReactiveFormsModule.

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

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

Espero que isso ajude alguém .. :)


7

Isso é para as pessoas que usam JavaScript simples em vez do Script de tipo. Além de referenciar o arquivo de script de formulários na parte superior da página, como abaixo

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

você também deve informar ao carregador do módulo para carregar o ng.forms.FormsModule. Depois de fazer as alterações, minha importspropriedade do NgModulemétodo ficou abaixo

imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],

Feliz codificação!


6

Atualizei do RC1 para o RC5 e recebi esse erro.

Concluí minha migração (introduzindo um novo app.module.tsarquivo, alterando package.jsonpara incluir novas versões e módulos ausentes e, finalmente, alterando meu main.tspara inicializar adequadamente, com base no exemplo de início rápido do Angular2 ).

Fiz um npm updatee depois um npm outdatedpara confirmar que as versões instaladas estavam corretas, ainda sem sorte.

Acabei limpando completamente a node_modulespasta e reinstalando com npm install- Voila! Problema resolvido.


5

Quando eu fiz o tutorial, o main.ts parecia um pouco diferente do que é agora. Parece muito semelhante, mas observe as diferenças (a primeira está correta).

Corrigir:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Código do tutorial antigo:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

4

adicione o código ao app.module.ts Funcionou para mim:

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

[...]

@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
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.