ข้อผิดพลาด Angular Framework ของ TypeScript- -“ ไม่มีคำสั่งกับ exportAs ที่ตั้งเป็น ngForm”

ฉันยังคงได้รับข้อผิดพลาดนี้ในขณะที่ใช้งาน Angular2-Forms Framework ของ TypeScript:

ไม่มีการdirectiveตั้งค่าเป็น "exportAs" เป็น "ngForm"

นี่คือรหัสของฉัน

โครงการพึ่งพา:

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

และนี่คือเทมเพลตการเข้าสู่ระบบ:

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

... และองค์ประกอบการเข้าสู่ระบบ:

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

ฉันมีข้อผิดพลาดนี้:

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

คุณต้องนำFormsModuleเข้าไม่เพียง แต่ AppModule รูทแต่ยังนำเข้าสู่ทุก subModuleที่ใช้คำสั่งรูปแบบเชิงมุมใด ๆ

// SubModule A

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

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

ฉันรู้ว่านี่เป็นโพสต์เก่า แต่ฉันต้องการแบ่งปันวิธีแก้ปัญหาของฉัน ฉันได้เพิ่ม " ReactiveFormsModule " ในimport [] array เพื่อแก้ไขข้อผิดพลาดนี้

ข้อผิดพลาด: ไม่มีคำสั่งโดยตั้งค่า "exportAs" เป็น "ngForm" ("

การแก้ไข:

module.ts

นำเข้า {FormsModule, ReactiveFormsModule } จาก '@ angular / forms'

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

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

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

(ในกรณีที่คนอื่นตาบอดเหมือนฉัน) form FTW ! ตรวจสอบให้แน่ใจว่าใช้<form>แท็ก

จะไม่ทำงาน:

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

ทำงานเหมือนมีเสน่ห์:

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

ในกรณีที่ชื่อถูกกำหนดเช่นนี้:

#editForm="testForm"

... การส่งออกจะต้องมีการกำหนดไว้ในเครื่องมือตกแต่งส่วนประกอบ:

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

ตรวจสอบว่าคุณนำเข้า FormsModule หรือไม่ ไม่มี ngControl ในเวอร์ชันรีลีสใหม่ของ angular 2 คุณต้องเปลี่ยนแม่แบบของคุณเป็นตัวอย่าง

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

สองสิ่งที่คุณต้องใส่ใจ ..

1. ถ้าคุณใช้โมดูลย่อยคุณต้องนำเข้า FormModule ในโมดูลย่อยนั้น

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

2. คุณต้องส่งออก FormModule ในโมดูล

       **exports:[FormsModule],**

   ดังนั้นร่วมกันดูเหมือนว่า การนำเข้า: [CommonModule, HttpModule, FormsModule], การส่งออก: [FormsModule],

3. ในด้านบนคุณต้องนำเข้า FormsModule

   นำเข้า {FormsModule} จาก '@ angular / forms';

หากคุณใช้เฉพาะแอปพลิเคชั่นโมดูล

ไม่จำเป็นต้องส่งออก .. จำเป็นต้องนำเข้าเท่านั้น

ฉันประสบปัญหานี้ แต่ไม่มีคำตอบที่นี่สำหรับฉัน ฉัน googled และพบว่าFormsModule not shared with Feature Modules

ดังนั้นหากรูปแบบของคุณอยู่ในโมดูลที่โดดเด่นแล้วคุณต้องนำเข้าและเพิ่มFromsModuleมี

โปรดอ้างอิง: https://github.com/angular/angular/issues/11365

นอกจากการนำเข้าโมดูลฟอร์มในไฟล์เข้าสู่ระบบคอมโพเนนต์ ts คุณต้องนำเข้า NgForm ด้วย

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

นี่เป็นการแก้ไขปัญหาของฉัน

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

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

ใน app.module.ts "cannot bind [formGroup] or no directive with export as"เพื่อแก้ปัญหาข้อผิดพลาดเช่นถาวร

นี้

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

นอกจากนี้ยังทำให้เกิดข้อผิดพลาดและสามารถแก้ไขได้โดยรวมทั้งสั่ง ngForm

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

ฉันได้รับคำถามเดียวกันนี้ซ้ำแล้วซ้ำอีกเนื่องจากเหตุผลเดียวกัน ดังนั้นให้ฉันตอบโดยพูดว่าฉันทำอะไรผิด อาจเป็นประโยชน์สำหรับใครบางคน

ฉันสร้างองค์ประกอบผ่านangular-cliคำสั่ง

ส่วนประกอบgc / บางสิ่ง / บางอย่าง

มันทำอะไรถูกสร้างส่วนประกอบตามที่ฉันต้องการ

นอกจากนี้ขณะที่การสร้างองค์ประกอบก็เพิ่มองค์ประกอบใน App โมดูลของการประกาศอาร์เรย์

หากเป็นกรณีนี้โปรดลบออก และ Voila! มันอาจทำงานได้

คุณต้องนำเข้า FormsModule จากนั้นวางไว้ในส่วนของการนำเข้า

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

ง่ายถ้าคุณยังไม่ได้นำเข้าโมดูลจากนั้นนำเข้าและประกาศการนำเข้า {FormsModule} จาก '@ angular / forms';

และถ้าคุณทำแล้วคุณจะต้องลบformControlName = 'อะไรก็ตาม'จากช่องใส่

คุณควรยุติแอพด้วย ctrl + c แล้วรันด้วย ng เสิร์ฟถ้าคุณไม่ได้รวม FormsModule ไว้ในไฟล์ app.module ที่คุณนำเข้าอาเรย์แล้วเพิ่มเข้าไปในภายหลังแองกูลาร์ไม่ทราบว่ามันไม่สแกนโมดูลอีกครั้ง คุณควรรีสตาร์ทแอพเพื่อให้มุมมองเห็นว่ามีโมดูลใหม่รวมอยู่หลังจากนั้นจะรวมฟีเจอร์ทั้งหมดของวิธีการของเทมเพลตไดรฟ์

ในกรณีของฉันฉันต้องลบngNoFormแอตทริบิวต์ออกจาก<form>แท็กของฉัน

หากคุณต้องการนำเข้า FormsModule ในแอปพลิเคชันของคุณ แต่ต้องการข้ามแบบฟอร์มเฉพาะคุณสามารถใช้คำสั่ง ngNoForm ซึ่งจะป้องกันไม่ให้เพิ่ม ngForm ในแบบฟอร์ม

การอ้างอิง: https://www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/

ฉันเพิ่งย้ายโมดูลการกำหนดเส้นทางเช่นบอกว่า ARoutingModule ด้านบน FormsModule และ ReactiveFormsModule และหลังจาก CommonModule ในการนำเข้าอาร์เรย์ของโมดูล

เพียงนำเข้าโมดูลที่ถูกต้อง

"FormsModule"

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

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

ข้อผิดพลาดนี้ยังเกิดขึ้นหากคุณพยายามที่จะเขียนกรณีทดสอบหน่วยในเชิงมุมโดยใช้ดอกมะลิ

import FormsModuleแนวคิดพื้นฐานของข้อผิดพลาดนี้คือการ ดังนั้นในไฟล์สำหรับการทดสอบหน่วยเราเพิ่มส่วนการนำเข้าและวาง FormsModule ในไฟล์นั้นภายใต้

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

ฉันมีปัญหาเดียวกันและแก้ไขได้โดยอัปเดตการอ้างอิงทั้งหมด (package.json) ด้วยคำสั่งต่อไปนี้ npm update -D && npm update -S

ตามที่ @ GünterZöchbauerชี้ให้แน่ใจว่าได้รวม FormsModule ไว้ก่อน