TypeScript-‘s Angular Framework Error – Er is geen richtlijn met exportAs ingesteld op ngForm

Ik krijg steeds deze foutmelding tijdens het gebruik van TypeScript’s Angular2-forms framework:

Er is geen directivemet “exportAs” ingesteld op “ngForm”

Hier is mijn code

projectafhankelijkheden :

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

En dit is de inlogsjabloon:

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

…en de inlogcomponent :

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

Ik heb deze fout:

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

Antwoord 1, autoriteit 100%

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

Antwoord 2, autoriteit 11%

Je moet FormsModuleimporteren in niet alleen de root AppModule, maar ook in elke subModuledie gebruikmaakt van richtlijnen voor hoekige vormen.

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

Antwoord 3, autoriteit 9%

Ik weet dat dit een oud bericht is, maar ik wil graag mijn oplossing delen.
Ik heb “ReactiveFormsModule” toegevoegd aan de imports[] array om deze fout op te lossen

Fout: er is geen instructie waarbij “exportAs” is ingesteld op “ngForm” (“

Oplossen:

module.ts

importeer {FormsModule, ReactiveFormsModule} uit ‘@angular/forms’

imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

Antwoord 4, autoriteit 3%

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

Antwoord 5, autoriteit 2%

(Voor het geval iemand anders blind is zoals ik)
formFTW! Zorg ervoor dat u de tag <form>gebruikt

werkt niet:

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

werkt als een tierelier:

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

Antwoord 6, autoriteit 2%

In het geval dat een naam als volgt wordt toegewezen:

#editForm="testForm"

… de exportAs moet worden gedefinieerd in de componentdecorateur:

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

Antwoord 7

controleer of u FormsModule importeert. Er is geen ngControl in de nieuwe versie van Forms angular 2 release. je moet je sjabloon wijzigen in als voorbeeld

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

Antwoord 8

Ik heb met dit probleem te maken gehad, maar geen van de antwoorden hier werkte voor mij. Ik heb gegoogled en vond dat FormsModule not shared with Feature Modules

Dus als je formulier zich in een uitgelichte module bevindt, moet je de FromsModuledaar importeren en toevoegen.

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

Antwoord 9

Twee dingen waar je op moet letten..

1. Als je de submodule gebruikt, moet je de FormModule in die submodule importeren.

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

2. je moet de FormModule in de module exporteren

      **exports:[FormsModule],**
   

   dus samen lijkt het op
   importeert:[CommonModule,HttpModule,FormulierenModule],
   exporteert:[FormsModule],

3. bovenaan moet je de FormsModule importeren

   importeer {FormsModule} uit ‘@angular/forms’;

als je alleen de app.module.ts gebruikt, dan

niet nodig om te exporteren.. alleen importeren vereist

Antwoord 10

Naast het importeren van de formuliermodule in het ts-bestand van de inlogcomponent, moet u ook NgForm importeren.

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

Dit heeft mijn probleem opgelost

Antwoord 11

Dit

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

Veroorzaakt ook de fout en kan worden verholpen door de ngForm-richtlijnop te nemen .

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

Antwoord 12

Ik ben op dezelfde vraag gekomen tijdens & opnieuw, ook om dezelfde reden. Dus laat me dit beantwoorden door te zeggen wat ik verkeerd deed. Misschien nuttig voor iemand.

Ik maakte een component via angular-cliop commando

ng g ccomponenten/iets/iets

Wat het deed, was het onderdeel maken zoals ik het wilde.

Terwijl het onderdeel werd gemaakt, werd het het onderdeel ook toegevoegd aan de declaratiereeks van de app-module.

Als dit het geval is, verwijder deze dan.
En voila! Het zou kunnen werken.

Antwoord 13

Deze fout treedt ook op als u probeert een unit-testcase in hoekig te schrijven met jasmijn.

Het basisconcept van deze fout is om import FormsModule. Dus, in het bestand voor eenheidstests, voegen we importsectie toe en plaatsen FormsModule in dat bestand onder

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

Antwoord 14

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

in app.module.ts om permanent fouten op te lossen zoals "cannot bind [formGroup] or no directive with export as".

Antwoord 15

In mijn geval was ik vergeten mijn component toe te voegen aan de declaratiereeks van app.module.ts, en voila! het probleem is opgelost.

Antwoord 16

Nog een itemcontrole:

Zorg ervoor dat uw component is toegevoegd aan de declaratie-array van @NgModule in app.module.ts

@NgModule({
declarations: [
    YourComponent,
],

Als je de opdracht ng generate componentuitvoert, wordt deze niet automatisch toegevoegd aan app.module.

Antwoord 17

Eenvoudig als je geen importmodule hebt, importeer en declareer dan
importeer { FormsModule } van ‘@angular/forms’;

en als u dat deed, hoeft u alleen maar ** formControlName=’whatever’ ** uit de invoervelden te verwijderen.

module.ts

import {FormsModule, ReactiveFormsModule} from '@angular/forms'
 imports: [
    BrowserModule,
    FormsModule, 
    ReactiveFormsModule
  ],

Antwoord 18

Ja, ik had hetzelfde probleem… Ik deed vooral dingen maar werkte niet.
Deze loste mijn probleem op. Omdat we hoekige ‘met’ gebruiken in de strikte modus.

voeg in app.module.ts deze code toe

import {FormsModule, ReactiveFormsModule} from '@angular/forms'
imports: [
    BrowserModule,
    FormsModule, 
    ReactiveFormsModule
],

en welk bestand je NgForm gebruikt
in .html-bestand

<form #form="ngForm" (ngSubmit)="loginSubmit(form);">
</form>

en in .ts-bestand

import { NgForm } from '@angular/forms';
@Component({
  selector: 'app-login-page',
  templateUrl: './login-page.component.html',
  styleUrls: ['./login-page.component.scss']
})
export class LoginPageComponent implements OnInit {
  NgForm=NgForm;//this one solve my problem...initialization and declaration
}

Antwoord 19

U moet de FormsModule importeren en deze vervolgens in de importsectie plaatsen.

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

Antwoord 20

Je moet de app beëindigen met ctrl+c en het opnieuw uitvoeren met ng serve, als je FormsModule niet in je app.module file imports array hebt opgenomen en het later hebt toegevoegd, angular weet het niet, het is niet opnieuw -scan-modules, u moet de app opnieuw opstarten, zodat u kunt zien dat de nieuwe module is meegeleverd, waarna alle functies van de sjabloonaanpak zijn inbegrepen

Antwoord 21

In mijn geval moest ik het kenmerk ngNoFormverwijderen uit mijn <form>-tag.

Als u FormsModule in uw toepassing wilt importeren, maar een specifiek formulier wilt overslaan, kunt u de ngNoForm-richtlijn gebruiken die voorkomt dat ngForm aan het formulier wordt toegevoegd

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

Antwoord 22

Ik heb zojuist routeringsmodules verplaatst, d.w.z. zeg ARoutingModule boven FormsModule en ReactiveFormsModule en nadat CommonModule een reeks modules heeft geïmporteerd.

Antwoord 23

Importeer gewoon de juiste module,

“FormulierenModule”

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

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

Antwoord 24

geef dit gewoon als referentie, omdat dit werkte voor nieuwere hoekige versies
Er is geen richtlijn met exportAs ingesteld op ngForm

Antwoord 25

Akkoord met de oplossing van @micronyks, maar dat is waar als je een eenvoudige applicatie hebt die niet veel modules bevat. Anders moeten we op dezelfde manier toevoegen aan de module waar we die <form #loginForm=”ngForm”> element en voeg onderstaande code toe aan die module als u deze niet wilt blootstellen aan alle modules of de hele applicatie.

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

Antwoord 26

U moet FormsModule aangeven en ook de component

declarations: [
   YourComponent  -->
  ],
  imports: [
    BrowserModule,
    FormsModule, -->
  ],