TypeScript- Açısal Çerçeve Hatası - “ngForm olarak exportAs ile ilgili bir yönerge yok”

TypeScript'in Angular2-form framework kullanırken bu hatayı almaya devam:

Hiçbir yoktur directive"ngForm" den "exportAs" seti ile

İşte kodum

proje bağımlılıkları:

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

Ve bu Giriş Şablonu:

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

... ve Giriş Bileşeni:

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

Bu hatayı aldım:

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

Sen ithalat gerek FormsModule, kök AppModule sadece içine değil, aynı zamanda her alt modül içine herhangi açısal formlar yönergelerini kullanır.

// SubModule A

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

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

Bu eski bir yazı olduğunu biliyorum, ama benim çözüm paylaşmak istiyorum. Bu hatayı gidermek için " [ ReactiveFormsModule " dosyasını içe aktarma [] dizisine ekledim

Hata: "exportAs" ile "ngForm" ("

Düzeltme:

module.ts

'@ açısal / formlar'dan {FormsModule, ReactiveFormsModule } dosyasını içe aktarın

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

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

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

(Başka birinin benim gibi kör olması durumunda) form FTW ! <form>Etiketi kullandığınızdan emin olun

çalışmaz:

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

çekicilik gibi çalışı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>

Aşağıdaki gibi bir ad atanmışsa:

#editForm="testForm"

... exportAs bileşen dekoratöründe tanımlanmalıdır:

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

FormsModule'u içeri aktarıp almadığınızı kontrol edin. Yeni formlar açısal 2 sürümde ngControl yoktur. şablonunuzu örnek olarak değiştirmeniz gerekir

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

Dikkat etmeniz gereken iki şey ..

1. Alt modülü kullanıyorsanız, bu alt modüle FormModule'u aktarmanız gerekir.

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

2. FormModule'ü modülde dışa aktarmanız gerekir

       **exports:[FormsModule],**

   bu yüzden birlikte içe aktarma gibi görünür : [CommonModule, HttpModule, FormsModule], dışa aktarma: [FormsModule],

3. Top u FormsModule almak zorunda

   '@ açısal / formlar'dan {FormsModule} dosyasını içe aktarın;

yalnızca app.module.ts kullanıyorsanız

ihracata gerek yok .. sadece ithalat gerekli

Bu sorunla karşılaştım, ancak buradaki cevapların hiçbiri benim için işe yaramadı. Google'a gittim ve buldumFormsModule not shared with Feature Modules

Formunuz öne çıkan bir modüldeyse, o zaman içe aktarıp FromsModuleoraya eklemeniz gerekir .

Lütfen ref: https://github.com/angular/angular/issues/11365

Giriş modülü ts dosyasında form modülünü içe aktarmanın yanı sıra NgForm'u da içe aktarmanız gerekir.

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

Bu sorunumu çözdü

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

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

app.module.ts gibi hataları kalıcı olarak çözmek için "cannot bind [formGroup] or no directive with export as".

Bu

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

Ayrıca hataya neden olur ve ngForm yönergesi dahil edilerek düzeltilebilir .

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

Aynı soruya tekrar tekrar geldim, aynı sebepten dolayı. Bu yüzden, yanlış yaptığımı söyleyerek cevap vereyim. Birisi için yardımcı olabilir.

angular-cliKomut yoluyla bileşen oluşturuyordum

gc bileşenleri / bir şey / bir şey

Yaptığı şey, bileşeni istediğim gibi yarattı.

Ayrıca, bileşeni oluştururken, bileşeni Uygulama Modülünün bildirimler dizisine ekledi .

Bu durumda, lütfen kaldırın. Ve Voila! Çalışabilir.

FormsModule'u içe aktarmanız ve ardından içe aktarma bölümüne yerleştirmeniz gerekir.

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

Modülü içe aktarmadıysanız, içe aktarın ve {@ angular / formlar'dan {FormsModule} dosyasını içe aktarın;

ve bunu yaptıysanız , giriş alanlarından formControlName = 'her neyse' kaldırmanız yeterlidir .

Uygulamayı ctrl + c ile sonlandırmalı ve ng sun ile yeniden çalıştırmalısınız, eğer app.module dosyası içe aktarma dizisine FormsModule eklemediyseniz ve daha sonra eklediyseniz, açısal bunu bilmez, modülleri yeniden taramaz , açısal yeni modülün dahil olduğunu görebilmeniz için uygulamayı yeniden başlatmanız gerekir, şablon sürücüsü yaklaşımının tüm özelliklerini içerecek

Benim durumumda bu ngNoFormözelliği etiketimden kaldırmak zorunda kaldım <form>.

Uygulamanızda FormsModule almak istiyorsanız, ancak belirli bir formu atlamak istiyorsanız, ngForm'un forma eklenmesini engelleyecek olan ngNoForm yönergesini kullanabilirsiniz.

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

Yönlendirme modüllerini yeni taşıdım, yani ARoutingModule, FormsModule ve ReactiveFormsModule'un üstünde ve CommonModule'den sonra modüllerin ithalat dizisinde.

Sadece doğru modülü alın,

"FormsModule"

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

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

Bu hata, yasemin kullanarak açısal olarak bir birim sınama durumu yazmaya çalışıyorsanız da oluşur.

Bu hatanın temel konsepti import FormsModule. Bu nedenle, birim testleri dosyasında içe aktarma Bölümü ekleriz ve FormsModule'u bu dosyaya

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

Aynı sorunu yaşadım ve tüm bağımlılıkları (package.json) aşağıdaki komutla güncelleyerek çözdüm npm update -D && npm update -S

@ Günter Zöchbauer'in işaret ettiği gibi, önce FormsModule'ü eklediğinizden emin olun.