Lỗi khung góc của TypeScript-'s - Không có lệnh nào với exportAs được đặt thành ngForm tựa

Tôi tiếp tục gặp lỗi này trong khi sử dụng khung Angular2-Forms của TypeScript:

Không có directive"exportAs" được đặt thành "ngForm"

Đây là mã của tôi

phụ thuộc dự án:

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

Và đây là Mẫu đăng nhập:

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

... và Thành phần đăng nhập:

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

Tôi có lỗi này:

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

Bạn phải nhập FormsModulevào không chỉ AppModule gốc mà còn vào mọi mô hình con sử dụng bất kỳ chỉ thị dạng góc nào.

// SubModule A

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

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

Tôi biết đây là một bài viết cũ, nhưng tôi muốn chia sẻ giải pháp của tôi. Tôi đã thêm " ReactiveFormsModule " trong mảng nhập [] để khắc phục lỗi này

Lỗi: Không có chỉ thị nào với "exportAs" được đặt thành "ngForm" ("

Sửa chữa:

mô-đun

nhập {FormsModule, ReactiveFormsModule } từ '@ angular / Forms '

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

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

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

(Chỉ trong trường hợp người khác bị mù như tôi) form FTW ! Đảm bảo sử dụng <form>thẻ

sẽ không làm việc:

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

hoạt động như sự quyến rũ:

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

Trong trường hợp một tên được gán như thế này:

#editForm="testForm"

... xuất khẩu phải được xác định trong trang trí thành phần:

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

kiểm tra xem bạn nhập FormsModule. Không có ngControl trong phiên bản phát hành góc 2 mới. bạn phải thay đổi mẫu của bạn thành một ví dụ

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

Hai điều bạn phải quan tâm ..

1. Nếu bạn sử dụng mô đun con, bạn phải nhập FormModule trong mô đun con đó.

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

2. bạn phải xuất FormModule trong mô-đun

       **exports:[FormsModule],**

   do đó, cùng nhau, nó trông giống như nhập khẩu: [CommonModule, HttpModule, FormsModule], export: [FormsModule],

3. Trong Top bạn phải nhập FormsModule

   nhập {FormsModule} từ '@ angular / Forms';

nếu bạn chỉ sử dụng app.module.ts thì

không cần xuất .. chỉ cần nhập

Tôi phải đối mặt với vấn đề này, nhưng không có câu trả lời nào ở đây có hiệu quả với tôi. Tôi googled và thấy rằngFormsModule not shared with Feature Modules

Vì vậy, nếu biểu mẫu của bạn nằm trong một mô-đun đặc trưng, ​​thì bạn phải nhập và thêm vào FromsModuleđó.

Vui lòng tham khảo: https://github.com/angular/angular/issues/11365

Ngoài việc nhập mô-đun biểu mẫu trong tệp ts thành phần đăng nhập, bạn cũng cần nhập NgForm.

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

Điều này đã giải quyết vấn đề của tôi

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

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

trong app.module.ts để giải quyết vĩnh viễn các lỗi như "cannot bind [formGroup] or no directive with export as".

Điều này

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

Cũng gây ra lỗi và có thể được sửa bằng cách đưa vào lệnh ngForm .

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

Tôi đã đi đến cùng một câu hỏi này nhiều lần, cũng vì lý do tương tự. Vì vậy, hãy để tôi trả lời điều này bằng cách nói những gì tôi đã làm sai. Có thể hữu ích cho ai đó.

Tôi đã tạo thành phần thông qua angular-clilệnh

ng gc thành phần / cái gì đó / cái gì đó

Những gì nó đã làm, đã được tạo ra các thành phần như tôi muốn.

Ngoài ra, trong khi tạo thành phần, nó đã thêm thành phần trong mảng khai báo của Mô-đun ứng dụng .

Nếu đây là trường hợp, xin vui lòng loại bỏ nó. Và Voila! Có thể đấy.

Bạn phải nhập FormsModule và sau đó đặt nó vào phần nhập.

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

Đơn giản nếu bạn chưa nhập mô-đun, sau đó nhập và khai báo nhập {FormsModule} từ '@ angular / Forms';

và nếu bạn đã làm thì bạn chỉ cần xóa formControlName = 'anything' khỏi các trường đầu vào.

Bạn nên chấm dứt ứng dụng với ctrl + c và chạy lại với ng phục vụ, nếu bạn không bao gồm FormsModule vào mảng nhập tệp app.module của bạn, sau đó thêm nó vào sau, angular không biết nó, nó không quét lại các mô-đun , bạn nên khởi động lại ứng dụng để góc cạnh có thể thấy mô-đun mới được bao gồm, sau những gì nó sẽ bao gồm tất cả các tính năng của phương pháp tiếp cận ổ đĩa mẫu

Trong trường hợp của tôi, tôi đã phải xóa ngNoFormthuộc tính khỏi <form>thẻ của tôi .

Nếu bạn muốn nhập FormsModule trong ứng dụng của mình nhưng muốn bỏ qua một biểu mẫu cụ thể, bạn có thể sử dụng lệnh ngNoForm sẽ ngăn ngForm được thêm vào biểu mẫu

Tham khảo: https://www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/

Tôi chỉ di chuyển các mô-đun định tuyến, ví dụ như ARoutingModule ở trên FormsModule và ReactiveFormsModule và sau CommonModule trong mảng nhập khẩu các mô-đun.

Chỉ cần nhập đúng mô-đun,

"FormsModule"

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

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

Lỗi này cũng xảy ra nếu bạn đang cố gắng viết một trường hợp thử nghiệm đơn vị ở góc bằng cách sử dụng hoa nhài.

Khái niệm cơ bản của lỗi này là import FormsModule. Do đó, trong tệp để kiểm tra đơn vị, chúng tôi thêm Phần nhập khẩu và đặt FormsModule trong tệp đó bên dưới

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

Tôi đã có cùng một vấn đề và giải quyết nó bằng cách cập nhật tất cả các phụ thuộc (pack.json) bằng lệnh sau npm update -D && npm update -S

Như @ Günter Zöchbauer đã chỉ ra, trước tiên hãy đảm bảo bao gồm FormsModule.