formgroup - formularios en angular 5

No existe una directiva con "exportAs" establecido en "ngForm"

Question

Tener este proyecto dependencias:

 "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 plantilla de inicio de sesión:

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

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

Answer 1

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

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>

Answer 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

Answer 3

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

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

Answer 4

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

Answer 5

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

Answer 6

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

Entonces, si su formulario está en un módulo destacado, debe importar y agregar el FromsModule allí.

Ref: https://github.com/angular/angular/issues/11365

Answer 7

Sé que esta es una publicación antigua, pero me gustaría compartir mi solución. Agregué " ReactiveFormsModule " en el conjunto de 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
],

Answer 8

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.

Answer 9

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.

Answer 10

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>

Answer 11

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

Answer 12

import { FormsModule } from ''@angular/forms'';
@NgModule({
imports: [FormsModule],
...
})

Answer 13

import { FormsModule } from ''@angular/forms'';
@NgModule({
imports: [
BrowserModule,
FormsModule //<----------make sure you have added this.
],
....
})