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

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

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

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

[...]

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

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

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

Você precisa importar o FormsModule

Abra app.module.ts

e adicione linha

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

e

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

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.

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

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

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

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

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

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

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>

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

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.

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
  ],

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.

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

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

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)

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

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

   

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

importar FormModule um app.module

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

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

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

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

Você precisa importar o FormsModule

Abra app.module.ts

e adicione linha

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

e

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

À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 .. :)

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!

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.

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

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

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

[...]

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