TypeScript-'s Angular Framework Error - “Tidak ada arahan dengan exportAs yang diatur ke ngForm”

Saya terus mendapatkan kesalahan ini saat menggunakan kerangka kerja Angular2-bentuk TypeScript:

Tidak ada directivedengan "exportAs" diatur ke "ngForm"

Ini kode saya

ketergantungan proyek:

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

Dan ini adalah Template Login:

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

... dan Komponen Masuk:

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

Saya memiliki Galat ini:

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

Anda harus mengimpor FormsModuleke tidak hanya AppModule root, tetapi juga ke setiap subModule yang menggunakan arahan bentuk sudut.

// SubModule A

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

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

Saya tahu ini adalah pos lama, tetapi saya ingin membagikan solusi saya. Saya telah menambahkan " ReactiveFormsModule " di impor [] array untuk menyelesaikan kesalahan ini

Kesalahan: Tidak ada arahan dengan "exportAs" disetel ke "ngForm" ("

Memperbaiki:

module.ts

import {FormsModule, ReactiveFormsModule } dari '@ angular / form'

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

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

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

(Kalau-kalau ada orang buta seperti saya) form FTW ! Pastikan untuk menggunakan<form> tag

tidak akan bekerja:

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

bekerja seperti pesona:

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

Dalam hal nama ditugaskan seperti ini:

#editForm="testForm"

... exportA harus didefinisikan dalam dekorator komponen:

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

periksa apakah Anda mengimpor FormsModule. Tidak ada ngControl dalam bentuk baru versi rilis angular 2. Anda harus mengubah template Anda sebagai contoh

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

Dua Hal yang Harus Anda Peduli ..

1. Jika Anda menggunakan sub modul, Anda harus mengimpor FormModule di sub modul itu.

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

2. Anda harus mengekspor FormModule dalam modul

       **exports:[FormsModule],**

   jadi bersama-sama terlihat seperti impor: [CommonModule, HttpModule, FormsModule], ekspor: [FormsModule],

3. di Top kamu harus mengimpor FormsModule

   impor {FormsModule} dari '@ angular / form';

jika Anda hanya menggunakan app.module.ts lalu

tidak perlu ekspor .. hanya perlu impor

Saya menghadapi masalah ini, tetapi tidak ada jawaban di sini yang berfungsi untuk saya. Saya mencari di Google dan menemukan ituFormsModule not shared with Feature Modules

Jadi Jika formulir Anda ada dalam modul unggulan, maka Anda harus mengimpor dan menambahkan FromsModule sana.

Silakan ref: https://github.com/angular/angular/issues/11365

Selain mengimpor modul formulir dalam file komponen ts login Anda perlu mengimpor NgForm juga.

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

Ini menyelesaikan masalah saya

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

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

di app.module.ts untuk secara permanen menyelesaikan kesalahan seperti "cannot bind [formGroup] or no directive with export as".

Ini

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

Juga menyebabkan kesalahan dan dapat diperbaiki dengan memasukkan arahan ngForm .

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

Saya sampai pada pertanyaan yang sama berulang-ulang, juga karena alasan yang sama. Jadi izinkan saya menjawab ini dengan mengatakan apa yang salah yang saya lakukan. Mungkin bermanfaat bagi seseorang.

Saya sedang membuat komponen melalui angular-cliperintah

ng gc komponen / sesuatu / sesuatu

Apa yang dilakukannya, telah menciptakan komponen seperti yang saya inginkan.

Juga, Saat membuat komponen, itu menambahkan komponen dalam array deklarasi Modul Aplikasi .

Jika ini masalahnya, harap hapus. Dan Voila! Mungkin berhasil.

Anda harus mengimpor FormsModule dan kemudian meletakkannya di bagian impor.

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

Sederhana jika Anda belum mengimpor modul maka impor dan nyatakan impor {FormsModule} dari '@ angular / form';

dan jika Anda melakukannya maka Anda hanya perlu menghapus formControlName = 'apa pun' dari bidang input.

Anda harus menghentikan aplikasi dengan ctrl + c dan menjalankannya kembali dengan ng serve, jika Anda tidak memasukkan FormsModule ke dalam array file impor app.module Anda, lalu menambahkannya nanti, sudut tidak mengetahuinya, tidak memindai ulang modul , Anda harus me-restart aplikasi sehingga sudut dapat melihat bahwa modul baru disertakan, setelah apa yang akan termasuk semua fitur pendekatan drive template

Dalam kasus saya, saya harus menghapus ngNoFormatribut dari <form>tag saya .

Jika Anda ingin mengimpor FormsModule di aplikasi Anda tetapi ingin melewatkan formulir tertentu, Anda bisa menggunakan arahan ngNoForm yang akan mencegah ngForm dari ditambahkan ke formulir

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

Saya baru saja pindah modul routing yaitu mengatakan ARoutingModule di atas FormsModule dan ReactiveFormsModule dan setelah CommonModule dalam impor array modul.

Cukup impor modul yang benar,

"FormsModule"

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

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

Kesalahan ini juga terjadi jika Anda mencoba untuk menulis unit uji kasus dalam sudut menggunakan melati.

Konsep dasar dari kesalahan ini adalah untuk import FormsModule. Dengan demikian, dalam file untuk pengujian unit, kami menambahkan Bagian impor dan menempatkan FormsModule dalam file itu di bawah

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

Saya memiliki masalah yang sama dan menyelesaikannya dengan memperbarui semua dependensi (package.json) dengan perintah berikut npm update -D && npm update -S

Seperti yang ditunjukkan oleh @ Günter Zöchbauer, pastikan untuk memasukkan FormsModule terlebih dahulu.