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?
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?
Respostas:
Para usar a ligação de dados bidirecional para entradas de formulário, você precisa importar o FormsModule
pacote 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 ngModel
não está funcionando porque ainda não faz parte do seu NgModule
.
Você precisa informar NgModule
que possui autoridade para usar em ngModel
todo o aplicativo. Você pode fazer isso adicionando FormsModule
em 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 FormsModule
no 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 FormsModule
no meu TestBed
TestingModule
.
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule
],
declarations: [
RegisterComponent
]
})
.compileComponents();
}));
Em app.module.ts
acrescentar o seguinte:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [AppComponent],
imports: [FormsModule],
})
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: ngModule
enquanto 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.ts
ou outro arquivo de módulo e certificar-se de ter FormsModule
importado ...
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.
FormsModule
aoimports: []
módulo em que você usangModel
. Caso contrário, publique seu código.