টাইপস্ক্রিপ্ট-এর কৌণিক ফ্রেমওয়ার্ক ত্রুটি - "এক্সপোর্টএগুলি এনজিএফর্মে সেট করা আছে এমন কোনও নির্দেশ নেই"

Question

আমি টাইপস্ক্রিপ্ট এর Angular2- ফর্ম ফ্রেমওয়ার্ক ব্যবহার করার সময় এই ত্রুটিটি পেতে থাকি:

সেখানে নেই 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)">

Answer 1

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

@NgModule({
  imports: [
             BrowserModule,

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

Comments

আমি এটি করেছি এবং তবুও ত্রুটিটি পেয়েছি। অন্য কোন ধারণা? (আমি প্রকাশের সংস্করণে আছি))

— ডেভিড ফেফার

এটি অবশ্যই <

— পপ করুন

@ পপ ধন্যবাদ, এটি এতে যুক্ত করা হয়েছিল divএবং এটি এই ত্রুটি ঘটায়।

— Arg0n

ধন্যবাদ, আমি এই ভুলে যাচ্ছি importsঅ্যারেতে যায় , এবং providersঅ্যারে হয় না

— তেত্রাদেভ

আমার মডিউলটিতে Reactive FormsModule যুক্ত করে আমার সমস্যার সমাধান করা হয়েছে।

— মোহাম্মদ মির্জাইয়ান

Answer 2

আপনাকে FormsModuleকেবল মূল অ্যাপমোডুলই নয়, প্রতিটি সাবমোডুলেও আমদানি করতে হবে যা কোনও কৌণিক ফর্ম নির্দেশাবলী ব্যবহার করে ।

// SubModule A

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

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

Comments

আপনি অ্যারে রফতানি করতে যোগ করতে পারেন, তারপরে আপনাকে এটিকে একাধিক সাবমডিউল আমদানিতে যুক্ত করার দরকার নেই

— সামিহ এ

@ সামিএ দয়া করে উদাহরণ দিয়ে ব্যাখ্যা করুন, রফতানি অ্যারে অ্যাপমোডুল বা সাবমডিউল এ যায়?

— তেত্রদেব

এছাড়াও প্রতিক্রিয়াশীল

— ফর্মগুলি মডেলটি

আমার জন্য কাজ করেছেন - তবে আমি খুঁজে পেয়েছি ততক্ষণ পর্যন্ত ত্রুটিটি পরিষ্কার হয়নি যতক্ষণ না আমি এনএমপি মেরেছি এবং এনপিএম চালুর পুনরায় চেষ্টা করি ran

— ডোভভ হেফেটজ

Answer 3

আমি জানি এটি একটি পুরানো পোস্ট, তবে আমি আমার সমাধানটি ভাগ করতে চাই। এই ত্রুটিটি সমাধান করার জন্য আমি আমদানিগুলিতে অ্যারেটিতে " Reactive FormsModule " যুক্ত করেছি ]

ত্রুটি: "এক্সপোর্টএস" "এনজিফর্ম" এ সেট করার সাথে কোনও নির্দেশ নেই ("

ফিক্স:

module.ts

'@ কৌণিক / ফর্ম' থেকে import ফর্মস মড্যুল, প্রতিক্রিয়াশীল ফর্মস মোডুল ule আমদানি করুন

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

Answer 4

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

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

Comments

আমি এটি করেছি এবং তবুও ত্রুটিটি পেয়েছি। অন্য কোন ধারণা? (আমি প্রকাশের সংস্করণে আছি))

— ডেভিড ফেফার

আপনি কি কখনও এটি খুঁজে বের করতে পারেন? একই ত্রুটি থাকা এবং আমিও ফর্মস মডুলুল আমদানি করেছি।

— জোশ

Answer 5

(ঠিক আমার ক্ষেত্রে অন্য কেউ অন্ধ হলে) form এফটিডাব্লু ! <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. আপনি যদি সাব মডিউলটি ব্যবহার করেন তবে আপনাকে সেই সাব মডিউলটিতে ফর্মমডুল আমদানি করতে হবে।

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

2. আপনাকে মডিউলে ফর্মমডুল রফতানি করতে হবে

       **exports:[FormsModule],**

   সুতরাং একসাথে এটি আমদানির মতো দেখায় : [কমনমোডুল, এইচটিপি মডুল, ফর্মস মোডুল], রফতানি: [ফর্মস মডেল],

3. শীর্ষে আপনাকে ফর্মমডুল আমদানি করতে হবে

   '@ কৌণিক / ফর্ম' থেকে import ফর্মস মডুলি} আমদানি করুন;

---

আপনি যদি তখন কেবল অ্যাপ্লিকেশন ব্যবহার করেন mod

রফতানি করার দরকার নেই .. শুধুমাত্র আমদানি প্রয়োজন

Comments

আপনি যদি নিজের নিজস্ব মডিউলটির মধ্যে ফর্মস মডুলুল ব্যবহার করেন তবে আপনার আপনার এক্সএক্সএক্সএক্স.এমডিউলস.এসটিতে নিম্নলিখিতগুলি দরকার need কৌণিক থেকে ফর্মগুলি আমদানি import { FormsModule } from '@angular/forms'; করুন : আমদানি অ্যারেতে এটি যোগ করুন এনজিডমডুল:@NgModule({ imports: [ FormsModule ],

— ভ্যান ডের লিন্ডেন

Answer 9

আমি এই সমস্যার মুখোমুখি হয়েছি, তবে এখানকার কোনও উত্তরই আমার পক্ষে কার্যকর হয়নি। আমি googled এবং এটি খুঁজেFormsModule not shared with Feature Modules

সুতরাং যদি আপনার ফর্মটি কোনও বৈশিষ্ট্যযুক্ত মডিউলে থাকে, তবে আপনাকে FromsModuleসেখানে আমদানি করতে হবে এবং যুক্ত করতে হবে।

দয়া করে রেফ করুন: https://github.com/angular/angular/issues/11365

Answer 10

লগইন উপাদান ts ফাইলে ফর্ম মডিউলটি আমদানির পাশাপাশি আপনাকে এনজিএফর্মও আমদানি করতে হবে।

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

এটি আমার সমস্যা সমাধান করেছে

Comments

আমি এই ত্রুটিটি পেয়েছি: আনকড ত্রুটি: মডিউল দ্বারা অপ্রত্যাশিত নির্দেশিকা 'এনজিফর্ম' আমদানি করা হয়েছে

— স্টেফি কেরান রানী

Answer 11

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

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

অ্যাপ্লিকেশন.মডিউল.টগুলিতে স্থায়ীভাবে এর মতো ত্রুটিগুলি সমাধান করার জন্য "cannot bind [formGroup] or no directive with export as"।

Answer 12

আমি একই কারণে আবারও একই প্রশ্নে এসেছি। সুতরাং আমি কী ভুল করছি তা বলে আমাকে উত্তর দিন। কারও জন্য সহায়ক হতে পারে।

আমি angular-cliকমান্ডের মাধ্যমে উপাদান তৈরি করছিলাম

এনজি জিসি উপাদান / কিছু / কিছু

এটি যা করেছে, তা আমার ইচ্ছা মতো তৈরি করা হয়েছিল।

এছাড়াও, উপাদান তৈরি করার সময়, এটি অ্যাপ মডিউলটির ঘোষণার অ্যারেতে উপাদানটি যুক্ত করেছে ।

যদি এটি হয় তবে দয়া করে এটি সরান। ও ভোইলা! এটি কাজ করতে পারে।

Answer 13

আপনাকে অবশ্যই ফর্মস মডুলুল আমদানি করতে হবে এবং তারপরে এটিকে আমদানির বিভাগে স্থাপন করতে হবে।

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

Answer 14

আপনি যদি মডিউলটি আমদানি না করে থাকেন তবে সরল যদি '@ কৌণিক / রূপগুলি' থেকে আমদানি {ফর্মসমডুল declare ঘোষণা করুন এবং ঘোষণা করুন;

এবং যদি আপনি তা করেন তবে আপনাকে কেবল ইনপুট ক্ষেত্রগুলি থেকে formControlName = 'যাই হোক না কেন' অপসারণ করতে হবে ।

Answer 15

আপনার অ্যাপ্লিকেশনটি সিআরটিএল + সি দিয়ে শেষ করা উচিত এবং এটি এনজি সার্ভ দিয়ে আবার চালানো উচিত, আপনি যদি অ্যাপ্লিকেশনগুলির মধ্যে ফর্মস মডেলটি অন্তর্ভুক্ত না করেন mod , আপনার অ্যাপ্লিকেশনটি পুনরায় আরম্ভ করা উচিত যাতে কৌণিক দেখতে পায় যে নতুন মডিউলটি অন্তর্ভুক্ত রয়েছে, এর পরে এতে টেমপ্লেট ড্রাইভের সমস্ত বৈশিষ্ট্য অন্তর্ভুক্ত থাকবে

Answer 16

আমার ক্ষেত্রে ngNoFormআমার <form>ট্যাগ থেকে বৈশিষ্ট্যটি সরিয়ে ফেলতে হয়েছিল ।

আপনি যদি নিজের অ্যাপ্লিকেশনটিতে ফর্মস মডেল আমদানি করতে চান তবে একটি নির্দিষ্ট ফর্মটি এড়িয়ে যেতে চান তবে আপনি এনজিওফর্ম নির্দেশিকাটি ব্যবহার করতে পারেন যা এনজিফর্মকে ফর্মে যুক্ত হতে আটকাবে

তথ্যসূত্র: https://www.techiediaries.com/angular-ngform-ngnoform-template-references-variable/

Answer 17

এই

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

ত্রুটির কারণও হয় এবং এনজিএফর্ম নির্দেশিকা অন্তর্ভুক্ত করে এটি ঠিক করা যায় ।

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

Answer 18

আমি স্রেফ রাউটিং মডিউলগুলি সরানো করেছি যেমন ফর্মস মোডিউল এবং রিএ্যাকটিভ ফর্মস মড্যুলের উপরে এবং ক্যানডমডুলের পরে মডিউলগুলির অ্যারে আমদানিতে অ্যারিটিং মডিউলটি বলি।

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

@ গন্টার জ্যাচবাউয়ার যেমন উল্লেখ করেছেন, প্রথমে ফর্মমডুল অন্তর্ভুক্ত করার বিষয়টি নিশ্চিত করুন।