Error de marco angular de TypeScript: "No hay directiva con exportAs configurado en ngForm"

Sigo recibiendo este error mientras uso el marco de formularios Angular2 de TypeScript:

No hay directivecon "exportAs" establecido en "ngForm"

Aquí está mi código

dependencias del proyecto:

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

Y esta es la plantilla de inicio de sesión:

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

... y el componente de inicio de sesión:

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

Tengo este error:

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

FormsModuleDebe importar no solo al AppModule raíz, sino también a cada subMódulo que use directivas 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.
  ],
  ....
})

Sé que esta es una publicación antigua, pero me gustaría compartir mi solución. Agregué " ReactiveFormsModule " en el arreglo importaciones [] para resolver este error

Error: no existe una directiva con "exportAs" establecido en "ngForm" ("

Reparar:

module.ts

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

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

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

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

(Por si acaso alguien más es ciego como yo) form FTW ! Asegúrate de usar la <form>etiqueta

no funciona:

<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 encanto:

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

En caso de que se asigne un nombre así:

#editForm="testForm"

... exportAs tiene que definirse en el decorador de componentes:

selector: 'test-form',
templateUrl: './test-form.component.html',
styleUrls: ['./test-form.component.scss'],
exportAs: 'testForm'

compruebe si importa FormsModule. No hay ngControl en las nuevas formas de la versión de lanzamiento angular 2. tienes que cambiar tu plantilla a modo de ejemplo

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

Dos cosas que debes cuidar ...

1. Si usa el submódulo, debe importar el FormModule en ese submódulo.

           **imports:[CommonModule,HttpModule,FormsModule]**

2. tienes que exportar el FormModule en el módulo

       **exports:[FormsModule],**

   juntos parecen importaciones: [CommonModule, HttpModule, FormsModule], exportaciones: [FormsModule],

3. en la parte superior, debe importar el módulo de formularios

   importar {FormsModule} desde '@ angular / forms';

si está usando solo app.module.ts entonces

no es necesario exportar ... solo se requiere importar

Me enfrenté a este problema, pero ninguna de las respuestas aquí funcionó para mí. Busqué en Google y descubrí queFormsModule not shared with Feature Modules

Entonces, si su formulario está en un módulo destacado, entonces debe importar y agregar FromsModuleallí.

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

Además de importar el módulo de formulario en el archivo ts del componente de inicio de sesión, también debe importar NgForm.

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

Esto resolvió mi problema

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

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

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

Esta

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

También causa el error y se puede solucionar mediante la inclusión de la directiva ngForm .

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

He venido a esta misma pregunta una y otra vez, también debido a la misma razón. Así que déjame responder esto diciendo qué mal estaba haciendo. Puede ser útil para alguien.

Estaba creando un componente a través angular-clide un comando

ng componentes gc / algo / algo

Lo que hizo fue crear el componente como yo quería.

Además, al crear el componente, agregó el componente en la matriz de declaraciones del módulo de aplicaciones .

Si este es el caso, quítelo. ¡Y voilá! Podría funcionar.

Debe importar el FormsModule y luego colocarlo en la sección de importaciones.

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

Simple si no ha importado el módulo, importe y declare la importación {FormsModule} desde '@ angular / forms';

y si lo hizo, entonces solo necesita eliminar formControlName = 'whatever' de los campos de entrada.

Debe terminar la aplicación con ctrl + c y volver a ejecutarla con ng serve, si no incluyó FormsModule en su matriz de importación de archivos app.module, y luego la agregó más tarde, angular no lo sabe, no vuelve a escanear módulos , debe reiniciar la aplicación para que angular pueda ver que se incluye un nuevo módulo, después de lo cual incluirá todas las características del enfoque de unidad de plantilla

En mi caso, tuve que eliminar el ngNoFormatributo de mi <form>etiqueta.

Si desea importar FormsModule en su aplicación pero desea omitir un formulario específico, puede usar la directiva ngNoForm que evitará que se agregue ngForm al formulario

Referencia: https://www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/

Acabo de mover los módulos de enrutamiento, es decir, decir ARoutingModule sobre FormsModule y ReactiveFormsModule y después de CommonModule en la matriz de importación de módulos.

Solo importa el módulo correcto,

"FormsModule"

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

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

Este error también se produce si está intentando escribir un caso de prueba de unidad en angular usando jazmín.

El concepto básico de este error es import FormsModule. Por lo tanto, en el archivo para pruebas unitarias, agregamos la sección de importaciones y colocamos FormsModule en ese archivo en

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

Tuve el mismo problema y lo resolví actualizando todas las dependencias (package.json) con el siguiente comando npm update -D && npm update -S

Como señaló @ Günter Zöchbauer, asegúrese de incluir primero el FormsModule.