टाइपस्क्रिप्ट- एंगुलर फ्रेमवर्क एरर - "एक्सपोर्टर्स के पास कोई निर्देश नहीं है जो एनफोर्म पर सेट है"

Question

टाइपस्क्रिप्ट के Angular2- रूप ढांचे का उपयोग करते समय मुझे यह त्रुटि मिलती रहती है:

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

Answer 1

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

@NgModule({
  imports: [
             BrowserModule,

             FormsModule      //<----------make sure you have added this.
           ],
  ....
})

Comments

मैंने यह कर लिया है और मुझे अभी भी त्रुटि मिलती है। कोई अन्य विचार? (मैं रिलीज के संस्करण पर हूं।)

— डेविड फेफर

यह <फॉर्म> तत्व

— पॉप

@ धन्यवाद, इसे जोड़ रहा था divऔर इस त्रुटि का कारण बना।

— अर्ग0n

धन्यवाद, मैं यह भूल जाता हूं कि यह importsसरणी में जाता है , और providersसरणी नहीं

— TetraDev

मेरे मॉड्यूल में ReactiveFormsModule जोड़ने के साथ मेरी समस्या हल हो गई।

— मोहम्मद मिर्ज़ाईन

Answer 2

आपको FormsModuleकेवल AppModule में ही नहीं, बल्कि किसी भी कोणीय रूपों के निर्देशों का उपयोग करने वाले प्रत्येक सबमॉड्यूल में भी आयात करना होगा ।

// SubModule A

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

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

Comments

आप एक्सपोर्ट एरे में जोड़ सकते हैं, फिर आपको इसे कई सबमॉड्यूल्स के आयात में जोड़ने की आवश्यकता नहीं होगी

— समिअ ए

@SamihA कृपया उदाहरण के साथ समझाएं, निर्यात सरणी AppModule या Submodule A में जाती है?

— तेतरदेव

इसके अलावा ReactiveFormsModule

— Snedden27

मेरे लिए काम किया - लेकिन मैंने पाया कि जब तक मैंने npm और reran npm रन शुरू नहीं किया, तब तक यह त्रुटि स्पष्ट नहीं हुई।

— डोवव हेफेट्ज

Answer 3

मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन मैं अपना समाधान साझा करना चाहूंगा। मैंने इस त्रुटि को हल करने के लिए [] सरणी में " ReactiveFormsModule " को आयात में जोड़ा है

त्रुटि: "ngForm" ("" के लिए "ExportAs" सेट के साथ कोई निर्देश नहीं है)

ठीक कर:

module.ts

'@ कोणीय / रूपों' से {FormsModule, ReactiveFormsModule } आयात करें

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

Answer 4

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

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

Comments

मैंने यह कर लिया है और मुझे अभी भी त्रुटि मिलती है। कोई अन्य विचार? (मैं रिलीज के संस्करण पर हूं।)

— डेविड फेफर

क्या आपको इसका कभी पता चला? एक ही त्रुटि होने और मेरे पास फॉर्ममॉडल भी आयातित है।

— जोश

Answer 5

(बस किसी और के मामले में मेरी तरह अंधा है) 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>

Answer 6

मामले में एक नाम इस तरह सौंपा गया है:

#editForm="testForm"

... निर्यातकों को घटक डेकोरेटर में परिभाषित किया जाना है:

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

Comments

मेरे लिए यह काम कर गया, जब स्वीकृत समाधान नहीं था।

— ir0h

यह पुष्टि करते हुए कि यह कुछ ऐसा है जिसे स्वीकृत समाधान के अलावा किया जाना है

— हेलो_एयरथ

Answer 7

जाँचें कि क्या आप प्रपत्र आयात करें। नए रूपों कोणीय 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>

Answer 8

दो बाते आपको ध्यान रखनी है ।।

1. यदि आप उप मॉड्यूल का उपयोग करते हैं, तो आपको उस उप मॉड्यूल में FormModule आयात करना होगा।

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

2. आपको मॉड्यूल में FormModule का निर्यात करना होगा

       **exports:[FormsModule],**

   इसलिए एक साथ यह आयात की तरह दिखता है : [राष्ट्रमंडल, HttpModule, FormsModule], निर्यात: [FormsModule],

3. शीर्ष u में FormsModule आयात करना है

   '@ कोणीय / रूपों' से आयात {FormMMule};

---

यदि आप केवल app.module.ts का उपयोग कर रहे हैं तो

निर्यात करने की आवश्यकता नहीं है .. केवल आयात की आवश्यकता है

Comments

यदि आप अपने स्वयं के मॉड्यूल में FormsModule का उपयोग करते हैं, तो आपको अपने xxxx.modules.ts में निम्नलिखित की आवश्यकता होगी। कोणीय से आयात प्रपत्र: import { FormsModule } from '@angular/forms'; इसे आयात सरणी में जोड़ें NgModule: @NgModule({ imports: [ FormsModule ],

— Koen van der Linden

Answer 9

मुझे इस मुद्दे का सामना करना पड़ा, लेकिन यहां किसी भी जवाब ने मेरे लिए काम नहीं किया। मैंने गुगली की और पायाFormsModule not shared with Feature Modules

इसलिए यदि आपका फॉर्म एक फ़ीचर्ड मॉड्यूल में है, तो आपको FromsModuleवहाँ आयात और जोड़ना होगा।

कृपया देखें : https://github.com/angular/angular/issues/11365

Answer 10

लॉगिन घटक ts फ़ाइल में फॉर्म मॉड्यूल आयात करने के अलावा आपको NgForm को भी आयात करना होगा।

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

इससे मेरी समस्या हल हो गई

Comments

मुझे यह त्रुटि मिली: अनकवर्ड एरर: अनपेक्षित निर्देशन 'NgForm' मॉड्यूल द्वारा आयात किया गया

— स्टेफी केरन रानी जे जूल

Answer 11

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

Answer 12

यह

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

त्रुटि का कारण भी बनता है और इसे ngForm निर्देश सहित शामिल किया जा सकता है ।

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

Answer 13

मैं एक ही सवाल पर बार-बार आया हूं, उसी कारण से भी। तो मैं इसका जवाब यह कहकर देता हूं कि मैं क्या गलत कर रहा था। किसी के लिए सहायक हो सकता है।

मैं angular-cliकमांड के जरिए कंपोनेंट बना रहा था

एनजी जीसी घटकों / कुछ / कुछ

जैसा कि मैंने किया था, जैसा मैंने चाहा था, वह घटक बनाया गया।

इसके अलावा, घटक बनाते समय, यह ऐप मॉड्यूल के घोषणा सरणी में घटक को जोड़ता है ।

यदि यह मामला है, तो कृपया इसे हटा दें। और वोइला! यह काम हो सकता है।

Answer 14

आपको FormsModule को आयात करना होगा और फिर आयात के अनुभाग में रखना होगा।

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

Answer 15

सरल यदि आपके पास आयात मॉड्यूल नहीं है, तो आयात करें और '@ कोणीय / रूपों' से {FormsModule} आयात की घोषणा करें;

और यदि आपने किया है तो आपको बस इनपुट फ़ील्ड से formControlName = 'जो भी हो' निकालना होगा ।

Answer 16

आपको ctrl + c के साथ ऐप को समाप्त करना चाहिए और इसे एनजी सर्व के साथ फिर से चलाना चाहिए, यदि आपने FormsModule को app.module फ़ाइल आयात सरणी में शामिल नहीं किया है, और फिर बाद में इसे जोड़ा है, तो कोणीय इसे नहीं जानता है, यह पुन: स्कैन मॉड्यूल नहीं करता है , आपको ऐप को पुनरारंभ करना चाहिए ताकि कोणीय देख सके कि नया मॉड्यूल शामिल है, इसके बाद इसमें टेम्पलेट ड्राइव दृष्टिकोण की सभी विशेषताएं शामिल होंगी

Answer 17

मेरे मामले में मुझे ngNoFormअपने <form>टैग से विशेषता को हटाना पड़ा ।

यदि आप अपने आवेदन में FormsModule आयात करना चाहते हैं, लेकिन एक विशिष्ट फ़ॉर्म को छोड़ना चाहते हैं, तो आप ngNoForm निर्देश का उपयोग कर सकते हैं जो प्रपत्र में जोड़े जाने से ngForm को रोक देगा

संदर्भ: https://www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/

Answer 18

मैंने बस रूटिंग मॉड्यूल को स्थानांतरित कर दिया है, अर्थात ARMMule को FormMMule और ReactiveFormsModule से ऊपर और मॉड्यूल के आयात सरणी में CommonModule के बाद कहा।

Answer 19

बस सही मॉड्यूल आयात करें,

"FormsModule"

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

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

Answer 20

यह त्रुटि तब भी होती है यदि आप चमेली का उपयोग कर कोणीय में एक इकाई परीक्षण केस लिखने की कोशिश कर रहे हैं।

इस त्रुटि की मूल अवधारणा है import FormsModule। इस प्रकार, यूनिट परीक्षणों के लिए फ़ाइल में, हम आयात अनुभाग जोड़ते हैं और उस फ़ाइल के तहत फ़ॉर्मस्मॉड्यूल को जगह देते हैं

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

Answer 21

मेरे पास एक ही मुद्दा था और इसे सभी कमांड (पैकेज.जसन) को निम्नलिखित कमांड के साथ अपडेट करके हल किया गया था npm update -D && npm update -S

जैसा कि @ गुंटर ज़ोचबॉयर ने बताया, पहले फॉर्ममॉडल को शामिल करना सुनिश्चित करें।