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


226

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

Respuestas:


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

@NgModule({
  imports: [
             BrowserModule,

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

32
He hecho esto y sigo recibiendo el error. ¿Alguna otra idea? (Estoy en la versión de lanzamiento.)
David Pfeffer

30
Se debe obligarse a elemento <form>
pop

66
@pop Gracias, lo estaba agregando divy causó este error.
Arg0n

1
Gracias, sigo olvidando que esto va en la importsmatriz, y no en la providersmatriz
TetraDev

99
mi problema se resolvió con agregar ReactiveFormsModule en mi módulo.
Mohammad Mirzaeyan

50

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

1
Puede agregar a la matriz de exportación, luego no necesitará agregarla a las importaciones de múltiples submódulos
Samih A

@SamihA ¿Explica con ejemplo que la matriz de exportación va en AppModule o Submodule A?
TetraDev

Tampoco olvide importar ReactiveFormsModule
Snedden27 el

Funcionó para mí, pero descubrí que no borraba el error hasta que maté npm y volví a ejecutar npm run start.
Dovev Hefetz

45

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

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

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

44
He hecho esto y sigo recibiendo el error. ¿Alguna otra idea? (Estoy en la versión de lanzamiento.)
David Pfeffer

16
¿Alguna vez resolviste esto? Al tener el mismo error y también he importado FormsModule.
Josh el

8

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

6

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'

Esto funcionó para mí, cuando la solución aceptada no.
ir0h

confirmando que esto es algo que debe hacerse además de la solución aceptada
hello_earth

5

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>

3

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


1
Si usa FormsModule dentro de su propio módulo, necesita lo siguiente en su xxxx.modules.ts. Importar formularios desde angular: import { FormsModule } from '@angular/forms'; agréguelo a la matriz de importaciones NgModule: @NgModule({ imports: [ FormsModule ],
Koen van der Linden

2

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


2

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


Recibí este error: Error no detectado: Directiva inesperada 'NgForm' importada por el 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*/,...
],

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



1

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.


0

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

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

0

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.


0

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



0

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.


0

Solo importa el módulo correcto,

"FormsModule"

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

0

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

-3

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.