javascript - property - input() angular 4 example




Não é possível vincular a 'ngModel', pois não é uma propriedade conhecida de 'entrada' (18)

Eu tenho 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>"): [email protected]:28 ; Zone: <root> ; Task: Promise.then ; Value: 

Eu estou olhando para o plunker Hero, mas eu não vejo nenhuma diferença do 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";
    }

Almação 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)], então você tem que importar 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 { }

Às vezes, você obtém esse erro quando tenta 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 de que o someInputVariableInModule1 não está disponível dentro de module1.componentA.component.ts - mesmo que você tenha o @Input() someInputVariableInModule1 no module1.componentA.

Se isso acontecer, você deseja compartilhar o module1.componentA para ser acessível em outros módulos. Então, se você compartilhar o module1.componentA dentro de um sharedModule, o module1.componentA será utilizável dentro de outros módulos (fora do module1), e cada módulo importando o sharedModule poderá acessar o seletor em seus templates injetando o @Input() variável declarada.


Estou usando Angular 7

Eu tenho que importar RactiveFormsModule porque eu estou usando a classe FormBuilder para criar formulário reativo.

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

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

Eu fiz o upgrade de RC1 para RC5 e recebi este erro.

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

Fiz uma npm update e depois um npm outdated para confirmar que as versões instaladas estavam corretas, ainda sem sorte.

Acabei limpando completamente a pasta node_modules e reinstalando com o npm install - Voila! Problema resolvido.


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

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

basicamente app.module.ts deve ser parecido com 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


Isso é para as pessoas que usam JavaScript simples em vez de Type Script. 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 dizer ao carregador do módulo para carregar o ng.forms.FormsModule . Depois de fazer as alterações minhas imports propriedade do método NgModule parecia abaixo

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

Codificação feliz!


No ngModule você precisa importar o FormsModule , porque o ngModel está vindo do FormsModule . Por favor modifique o seu app.module.ts como o código abaixo que eu 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 { }

No módulo você está disposto a usar ngModel você tem que importar FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

Para poder usar a vinculação de dados bidirecional para entradas de formulário, você precisa importar o pacote FormsModule em seu módulo Angular . Para mais informações, veja o tutorial oficial do Angular 2 here e a documentação oficial dos forms


Para qualquer versão do Angular 2, você precisa importar o FormsModule no seu arquivo app.module.ts e isso irá corrigir o problema.


Quando eu fiz o tutorial pela primeira vez, 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 tutorial antigo:

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

Recentemente, descobri que o erro acontece não apenas no caso de você esquecer de importar o FormsModule no seu módulo. No meu caso, o problema estava neste código

<input type="text" class="form-control" id="firstName"
                   formControlName="firstName" placeholder="Enter First Name" 
                   value={{user.firstName}} [(ngModel)]="user.firstName">

Eu corrijo com change formControlName -> name

<input type="text" class="form-control" id="firstName"
                   name="firstName" placeholder="Enter First Name" 
                   value={{user.firstName}} [(ngModel)]="user.firstName">

Espero que esta resposta poupe tempo para alguém que tenha o mesmo problema.


Se você ainda estiver recebendo o erro após importar o FormsModule corretamente, verifique seu terminal ou (console do Windows) porque seu projeto não está compilando (devido a outro erro que poderia ser qualquer um) e sua solução não foi refletida no seu navegador!

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


Se você precisar usar [(ngModel)] primeiro, precisará importar o FormsModule em app.module.ts e, em seguida, adicionar uma lista de importações. Algo assim:

app.module.ts

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

app.component.ts

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

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

Gentilmente aberto app.module.ts

Importar FormsModule de @ angular / forms

Ex:

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

e

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

Você precisa importar o FormsModule

Abra o app.module.ts

e adicione linha

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

e

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

importe FormsModule no seu módulo de aplicativo.

Isso permitiria que seu aplicativo fosse executado corretamente.

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

ngModel está vindo de FormsModule. Existem alguns casos em que você pode receber este tipo de erro:

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

  • declarar o FormsModule nos arrays de importação e exportação no module1 para ser capaz de vê-lo no model2 também

  1. (Em algumas versões eu enfrentei este problema) Você importou corretamente o FormsModule, mas o problema está na tag HTML de entrada. Você deve adicionar o atributo de tag de nome para entrada e o nome do objeto ligado em [(ngModel)] deve ser o mesmo que o nome no atributo name





input