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

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

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

@NgModule({
  imports: [
             BrowserModule,

             FormsModule      //<----------make sure you have added this.
           ],
  ....
})

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

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

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

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

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

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'

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>

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

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

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

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

este

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

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

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

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.

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

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

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.

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

No meu caso, tive que remover o ngNoFormatributo da minha <form>tag.

Se você deseja importar o FormsModule no seu aplicativo, mas deseja pular um formulário específico, pode usar a diretiva ngNoForm que impedirá que o ngForm seja adicionado ao formulário

Referência: https://www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/

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.

Basta importar o módulo correto,

"FormsModule"

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule //<---.
  ],
  ....
})

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

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.