Errore angolare del framework di TypeScript - "Non esiste alcuna direttiva con exportAs impostato su ngForm"

Continuo a ricevere questo errore durante l'utilizzo del framework Angular2-form di TypeScript:

Non esiste un directive"exportAs" impostato su "ngForm"

Ecco il mio codice

dipendenze del progetto:

  "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 questo è il modello di accesso:

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

... e il componente di accesso:

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

Ho questo errore:

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

Devi importare FormsModulenon solo nel AppModule di root, ma anche in ogni sottomodulo che utilizza le direttive sulle forme angolari.

// SubModule A

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule      //<----------make sure you have added this.
  ],
  ....
})

So che questo è un vecchio post, ma vorrei condividere la mia soluzione. Ho aggiunto " ReactiveFormsModule " nell'array imports [] per risolvere questo errore

Errore: non esiste alcuna direttiva con "exportAs" impostato su "ngForm" ("

fix:

module.ts

importare {FormsModule, ReactiveFormsModule } da "@ angular / form"

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

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

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

(Nel caso in cui qualcun altro sia cieco come me) form FTW ! Assicurati di usare il <form>tag

non funzionerà:

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

funziona come un incantesimo:

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

Nel caso in cui un nome venga assegnato in questo modo:

#editForm="testForm"

... exportAs deve essere definito nel decoratore dei componenti:

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

controlla se importi FormsModule. Non c'è ngControl nelle nuove versioni angular 2 versione di rilascio. devi cambiare il tuo modello come esempio

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

Due cose che devi preoccuparti ..

1. Se si utilizza il sottomodulo, è necessario importare il FormModule in quel sottomodulo.

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

2. devi esportare il FormModule nel modulo

       **exports:[FormsModule],**

   così insieme sembra importare: [CommonModule, HttpModule, FormsModule], export: [FormsModule],

3. in cima devi importare il Modulo

   importare {FormsModule} da '@ angular / form';

se stai usando solo app.module.ts allora

non è necessario esportare .. è necessaria solo l'importazione

Ho affrontato questo problema, ma nessuna delle risposte qui ha funzionato per me. Ho cercato su Google e l'ho trovatoFormsModule not shared with Feature Modules

Quindi, se il modulo si trova in un modulo in primo piano, è necessario importare e aggiungere FromsModulelì.

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

Oltre a importare il modulo modulo nel file ts del componente login è necessario importare anche NgForm.

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

Questo ha risolto il mio problema

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

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

in app.module.ts per risolvere in modo permanente errori come "cannot bind [formGroup] or no directive with export as".

Questo

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

Inoltre causa l'errore e può essere corretto includendo la direttiva ngForm .

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

Sono arrivato a questa stessa domanda più e più volte, anche per lo stesso motivo. Quindi lasciami rispondere dicendo ciò che stavo facendo. Potrebbe essere utile per qualcuno.

Stavo creando un componente tramite angular-clicomando

di componenti gc / qualcosa / qualcosa

Quello che ha fatto, è stato creato il componente come volevo.

Inoltre, durante la creazione del componente, ha aggiunto il componente nell'array delle dichiarazioni del modulo app .

In tal caso, rimuoverlo. E voilà! Potrebbe funzionare

È necessario importare il modulo Forms e inserirlo nella sezione delle importazioni.

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

Semplice se non hai importato il modulo, importa e dichiara import {FormsModule} da '@ angular / form';

e se lo hai fatto, devi solo rimuovere formControlName = 'qualunque' ' dai campi di input.

Dovresti terminare l'app con ctrl + c ed eseguirla nuovamente con ng serve, se non hai incluso FormsModule nel tuo array di importazioni di file app.module e poi l'hai aggiunta in un secondo momento, angolare non la conosce, non esegue nuovamente la scansione dei moduli , dovresti riavviare l'app in modo che angolare possa vedere che è incluso un nuovo modulo, dopo di che includerà tutte le funzionalità dell'approccio del modello di unità

Nel mio caso ho dovuto rimuovere l' ngNoFormattributo dal mio <form>tag.

Se si desidera importare FormsModule nella propria applicazione ma si desidera saltare un modulo specifico, è possibile utilizzare la direttiva ngNoForm che impedirà l'aggiunta di ngForm al modulo

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

Ho appena spostato i moduli di routing, ad esempio dire ARoutingModule sopra FormsModule e ReactiveFormsModule e dopo CommonModule nelle importazioni di array di moduli.

Importa semplicemente il modulo corretto,

"FormsModule"

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

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

Questo errore si verifica anche se si sta tentando di scrivere un caso di test unitario in angolare usando il gelsomino.

Il concetto di base di questo errore è import FormsModule. Pertanto, nel file per i test unitari, aggiungiamo la sezione Import e inseriamo FormsModule in quel file

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

Ho avuto lo stesso problema e l'ho risolto aggiornando tutte le dipendenze (package.json) con il seguente comando npm update -D && npm update -S

Come ha sottolineato @ Günter Zöchbauer, assicurati di includere prima il FormsModule.