Erro de estrutura angular do TypeScript - “Não há nenhuma diretiva com exportAs definida como ngForm”

226

Eu continuo recebendo esse erro ao usar a estrutura Angular2-forms do TypeScript:

Não existe directive"exportAs" definido como "ngForm"

Aqui está o meu código

dependências do projeto:

  "dependencies": {
    "@angular/common": "2.0.0-rc.6",
    "@angular/compiler": "2.0.0-rc.6",
    "@angular/core": "2.0.0-rc.6",
    "@angular/forms": "2.0.0-rc.6",
    "@angular/http": "2.0.0-rc.6",
    "@angular/platform-browser": "2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
    "@angular/router": "3.0.0-rc.2",
    "ng2-bootstrap": "^1.1.1",
    "reflect-metadata": "^0.1.8",
    "core-js": "^2.4.0",
    "es6-module-loader": "^0.17.8",
    "rxjs": "5.0.0-beta.11",
    "systemjs": "0.19.27",
    "zone.js": "0.6.17",
    "jquery": "3.0.0",
  }

E este é o modelo de login:

<form #loginForm="ngForm" (ng-submit)="authenticate(loginForm.value)">
</form>

... e o componente de logon:

import { Component } from '@angular/core';
import {Http, Headers}  from '@angular/http';
@Component({
    moduleId: module.id,
    selector: 'login-cmp',
    templateUrl: 'login.component.html'
})
export class LoginComponent {
  constructor($http: Http) {
    this.$http = $http;
  }
  authenticate(data) {
   ... 
  }
}

Eu tenho este erro:

zone.js?1474211973422:484 Unhandled Promise rejection: Template parse errors:    
There is no directive with "exportAs" set to "ngForm" ("
            <form [ERROR ->]#loginForm="ngForm" 
(ngsubmit)="authenticate(loginForm.value)">
Nassim MOUALEK
fonte

Respostas:

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

@NgModule({
  imports: [
             BrowserModule,

             FormsModule      //<----------make sure you have added this.
           ],
  ....
})
micronyks
fonte
32
Eu fiz isso e ainda recebo o erro. Alguma outra ideia? (Eu estou na versão de lançamento.)
David Pfeffer
30
Ele deve estar associado ao elemento <form>
pop
6
@ pop Obrigado, foi adicioná-lo dive causou este erro.
Arg0n
1
Obrigado, eu continuo esquecendo isto vai na importsmatriz, e não a providersvariedade
TetraDev
9
meu problema resolvido com add ReactiveFormsModule no meu módulo.
Mohammad Mirzaeyan 15/0318
50

É necessário importar FormsModulenão apenas o AppModule raiz, mas também todo subModule que use as diretivas de formas angulares.

// SubModule A

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule      //<----------make sure you have added this.
  ],
  ....
})
TetraDev
fonte
1
Você pode adicionar à matriz de exportação e não precisará adicioná-la à importação de vários submódulos.
Samih A
@SamihA Por favor, explique com exemplo, a matriz de exportação entra no AppModule ou no Submodule A?
TetraDev 02/0118
Além disso, não se esqueça de importar o ReactiveFormsModule
Snedden27
Funcionou para mim - mas achei que não solucionou o erro até que eu matei o npm e reran npm run start.
Dovev Hefetz
45

Sei que este é um post antigo, mas gostaria de compartilhar minha solução. Eu adicionei " ReactiveFormsModule " na matriz imports [] para resolver esse erro

Erro: Não há nenhuma diretiva com "exportAs" definida como "ngForm" ("

Consertar:

module.ts

importar {FormsModule, ReactiveFormsModule } de '@ angular / forms'

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],
Shakeer Hussain
fonte
14
import { FormsModule }   from '@angular/forms';

@NgModule({
  imports: [FormsModule],
  ...
})
Günter Zöchbauer
fonte
4
Eu fiz isso e ainda recebo o erro. Alguma outra ideia? (Eu estou na versão de lançamento.)
David Pfeffer
16
Você já descobriu isso? Tendo o mesmo erro e tenho FormsModule importado também.
21416 Josh
8

(Apenas no caso de alguém ser cego como eu) form FTW ! Certifique-se de usar a <form>tag

não vai funcionar:

<div (ngSubmit)="search()" #f="ngForm" class="input-group">
    <span class="input-group-btn">
      <button class="btn btn-secondary" type="submit">Go!</button>
    </span>
    <input type="text" ngModel class="form-control" name="search" placeholder="Search..." aria-label="Search...">
</div>

funciona como charme:

 <form (ngSubmit)="search()" #f="ngForm" class="input-group">
            <span class="input-group-btn">
              <button class="btn btn-secondary" type="submit">Go!</button>
            </span>
            <input type="text" ngModel class="form-control" name="search" placeholder="Search..." aria-label="Search...">
</form>
Sete
fonte
6

Caso um nome seja atribuído assim:

#editForm="testForm"

... o exportAs deve ser definido no decorador de componentes:

selector: 'test-form',
templateUrl: './test-form.component.html',
styleUrls: ['./test-form.component.scss'],
exportAs: 'testForm'
Nadine
fonte
isso funcionou para mim, quando a solução aceita não.
ir0h
confirmando que isso é algo que deve ser feito além da solução aceita
hello_earth
5

verifique se você importa o FormsModule. Não há ngControl na nova versão angular 2 do forms. você tem que mudar seu modelo para como um exemplo

<div class="row">
    <div class="form-group col-sm-7 col-md-5">
        <label for="name">Name</label>
        <input type="text" class="form-control" required
               [(ngModel)]="user.name"
               name="name" #name="ngModel">
        <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
            Name is required
        </div>
    </div>
</div>
Md Ayub Ali Sarker
fonte
3

Duas coisas que você precisa cuidar ..

  1. Se você estiver usando o submódulo, precisará importar o FormModule nesse submódulo.

            **imports:[CommonModule,HttpModule,FormsModule]**
  2. você precisa exportar o FormModule no módulo

        **exports:[FormsModule],**

    então, juntos, parecem importações: [CommonModule, HttpModule, FormsModule], exportações: [FormsModule],

  3. no topo você tem que importar o FormsModule

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


se você estiver usando apenas o app.module.ts,

não é necessário exportar .. somente importação necessária

shajahan
fonte
1
Se você usar o FormsModule em seu próprio módulo, precisará do seguinte em xxxx.modules.ts. Importar formulários do Angular: import { FormsModule } from '@angular/forms'; adicione-o à matriz de importações NgModule: @NgModule({ imports: [ FormsModule ],
Koen van der Linden
2

Eu enfrentei esse problema, mas nenhuma das respostas aqui funcionou para mim. Eu pesquisei e descobri queFormsModule not shared with Feature Modules

Portanto, se o seu formulário estiver em um módulo em destaque, você precisará importar e adicionar o FromsModulelá.

Por favor, ref: https://github.com/angular/angular/issues/11365

Prasanth Bendra
fonte
2

Além de importar o módulo de formulário no arquivo ts do componente de login, você também precisa importar o NgForm.

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

Isso resolveu meu problema

Jo Paul
fonte
Eu tenho esse erro: Erro Uncaught: directiva Unexpected 'NgForm' importado pelo módulo
Steffi Keran Rani J
1
import { FormsModule,ReactiveFormsModule }from'@angular/forms';

imports:[
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule/*This one in particular*/,...
],

no app.module.ts para resolver permanentemente erros como "cannot bind [formGroup] or no directive with export as".

Ishan
fonte
1

este

<div #myForm="ngForm"></div>

Também causa o erro e pode ser corrigido incluindo a diretiva ngForm .

<div ngForm #myForm="ngForm"></div>
Ciclo da água
fonte
1

Eu vim para esta mesma pergunta repetidamente, também devido ao mesmo motivo. Então deixe-me responder dizendo o que estava errado. Pode ser útil para alguém.

Eu estava criando componente via angular-clipor comando

ng componentes gc / algo / algo

O que ele fez, foi criado o componente como eu queria.

Além disso, ao criar o componente, ele foi adicionado à matriz de declarações do App Module .

Se for esse o caso, remova-o. E Voila! Pode funcionar.

HV Sharma
fonte
0

Você deve importar o FormsModule e, em seguida, colocá-lo na seção de importações.

import { FormsModule } from '@angular/forms';
Ricardo Tovar
fonte
0

Simples se você não tiver importado o módulo, importe e declare import {FormsModule} de '@ angular / forms';

e se você fez isso, basta remover formControlName = 'qualquer coisa' dos campos de entrada.

Hasnain Ali Sohrani
fonte
0

Você deve encerrar o aplicativo com ctrl + ce executá-lo com ng serve, se você não incluiu o FormsModule na matriz de importação de arquivo app.module e o adicionou posteriormente, angular não sabe, não faz a varredura novamente dos módulos , reinicie o aplicativo para que o angular possa ver que o novo módulo está incluído, depois do que ele incluirá todos os recursos da abordagem da unidade de modelo

Artur O
fonte
0

Acabei de mover os módulos de roteamento, ou seja, dizer ARoutingModule acima de FormsModule e ReactiveFormsModule e depois de CommonModule na importação de matriz de módulos.

ProgIn
fonte
0

Basta importar o módulo correto,

"FormsModule"

import { FormsModule } from "@angular/forms";
@NgModule({
  imports: [
    BrowserModule,
    FormsModule //<---.
  ],
  ....
})
Andres
fonte
0

Este erro também ocorre se você estiver tentando escrever um caso de teste de unidade em angular usando jasmim.

O conceito básico deste erro é para import FormsModule. Assim, no arquivo para testes de unidade, adicionamos Seção de importações e colocamos FormsModule nesse arquivo em

    TestBed.configureTestingModule
    For eg: 
    TestBed.configureTestingModule({
        declarations: [ XYZComponent ],
        **imports: [FormsModule]**,
    }).compileComponents();
Tejas
fonte
-3

Eu tive o mesmo problema e o resolvi atualizando todas as dependências (package.json) com o seguinte comando npm update -D && npm update -S

Como apontou @ Günter Zöchbauer, inclua o FormsModule primeiro.

Fzum
fonte