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

Question

আমি আরসি 4 এ আছি এবং আমি ত্রুটিটি পাচ্ছি যে আমার টেমপ্লেটের কারণে "এক্সপোর্টএস" "এনজিফর্ম" এ সেট করার কোনও নির্দেশ নেই :

<div class="form-group">
        <label for="actionType">Action Type</label>
        <select
            ngControl="actionType" 
      ===>  #actionType="ngForm" 
            id="actionType" 
            class="form-control" 
            required>
            <option value=""></option>
            <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
                {{ actionType.label }}
            </option>
        </select> 
    </div>

বুট.টিস:

import {disableDeprecatedForms, provideForms} from '@angular/forms'; 

 import {bootstrap} from '@angular/platform-browser-dynamic';
 import {HTTP_PROVIDERS, Http} from '@angular/http';
 import {provideRouter} from '@angular/router';

import {APP_ROUTER_PROVIDER} from './routes';

import {AppComponent} from './app.component';

bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms(), APP_ROUTER_PROVIDER, HTTP_PROVIDERS]);

/// তাই এখানে আমার ড্রপডাউন তালিকা:

<fieldset ngControlGroup="linkedProcess" >
                     <div ngControlGroup="Process" >
                         <label>Linked Process</label>
                          <div class="form-group">       
        <select 
            ngModel
            name="label" 
            #label="ngModel" 
            id="label" 
            class="form-control" required
            (change)="reloadProcesse(list.value)" 
            #list>
            <option value=""></option>
            <!--<option value=`{{ActionFormComponent.getFromString('GET'')}}`></option>-->                 
            <option *ngFor="let processus of linkedProcess?.processList?.list; let i = index" 
            value="{{ processus[i].Process.label}}">
                {{processus.Process.label}}
            </option>
        </select> 
        </div>
     </div>

// আমার উপাদান টিএস:

আমি এটি পুরানো রূপগুলিতে এভাবে উপস্থাপন করছিলাম:

 categoryControlGroups:ControlGroup[] = [];
     categories:ControlArray = new ControlArray(this.categoryControlGroups);

এবং এখন আমি এটি করছি:

categoryControlGroups:FormGroup[] = [];
     categories:FormArray = new FormArray(this.categoryControlGroups);

আপনি কি মনে করেন এটি সমস্যার কারণ ??

Comments

আপনি কি সংস্করণ ব্যবহার করছেন? আপনি কি ফর্ম বুস্ট্র্যাপ?

— acdcjunior

Answer 1

2.0.0.rc6 থেকে :

ফর্মগুলি : অবচিত provideForms()এবং disableDeprecatedForms()কার্যাদি সরানো হয়েছে। আমদানি দয়া করে FormsModuleবা ReactiveFormsModuleথেকে @angular/formsপরিবর্তে।

সংক্ষেপে:

• আপনি যদি টেমপ্লেট-চালিত ফর্মগুলিFormsModule ব্যবহার করেন তবে এতে আপনার যুক্ত করুন @NgModule।
• আপনি যদি মডেল চালিত ফর্মগুলিReactiveFormsModule ব্যবহার করেন তবে এতে আপনার যুক্ত করুন @NgModule।

সুতরাং, আপনারapp.module.ts বা সমতুল্য যুক্ত করুন:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; // <== add the imports!
 
import { AppComponent }  from './app.component';
 
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,                               // <========== Add this line!
    ReactiveFormsModule                        // <========== Add this line!
  ],
  declarations: [
    AppComponent
    // other components of yours
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

এই মডিউলগুলির একটিতে ব্যর্থ হওয়ায় আপনার মুখোমুখি একটিও ত্রুটি হতে পারে:

'এনজিমোডেল' এর সাথে আবদ্ধ হতে পারে না কারণ এটি 'ইনপুট' এর পরিচিত সম্পত্তি নয়।

'ফর্মগ্রুপ' তে আবদ্ধ হতে পারে না কারণ এটি 'ফর্ম' এর পরিচিত সম্পত্তি নয়

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

আপনি সন্দেহে হন, তাহলে আপনি উভয় প্রদান করতে পারেনFormsModule এবং ReactiveFormsModuleএকসঙ্গে, কিন্তু তারা আলাদাভাবে সম্পূর্ণ কার্যকর হয়। আপনি যখন এই মডিউলগুলির মধ্যে একটি সরবরাহ করেন, তখন সেই মডিউলটির ডিফল্ট ফর্ম নির্দেশাবলী এবং সরবরাহকারী আপনার কাছে অ্যাপ্লিকেশন উপলব্ধ থাকবে।

---

ওল্ড ফর্ম ব্যবহার করছেন ngControl?

আপনার যদি এই মডিউলগুলি থাকে তবে @NgModuleসম্ভবত আপনি পুরানো নির্দেশিকা ব্যবহার করছেন, যেমন ngControl, যা একটি সমস্যা, কারণ ngControlনতুন ফর্মগুলির কোনও নেই । এটি কম-বেশি * দ্বারা প্রতিস্থাপিত হয়েছিল ngModel।

উদাহরণস্বরূপ, সমতূল্য <input ngControl="actionType">হয় <input ngModel name="actionType">, তাই পরিবর্তন আপনার টেম্পলেটে।

একইভাবে, নিয়ন্ত্রণগুলিতে রফতানি ngFormআর হয় না , এখন ngModel। সুতরাং, আপনার ক্ষেত্রে, #actionType="ngForm"সঙ্গে প্রতিস্থাপন #actionType="ngModel"।

সুতরাং ফলস্বরূপ টেমপ্লেটটি হওয়া উচিত ( ===>গুলি পরিবর্তিত):

<div class="form-group">
    <label for="actionType">Action Type</label>
    <select
  ===>  ngModel
  ===>  name="actionType" 
  ===>  #actionType="ngModel" 
        id="actionType" 
        class="form-control" 
        required>
        <option value=""></option>
        <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
            {{ actionType.label }}
        </option>
    </select> 
</div>

* কম বা বেশি কারণ সমস্ত কার্যকারিতা ngControlসরানো হয়নি ngModel। কিছু সবেমাত্র সরানো হয়েছে বা এখন আলাদা। একটি উদাহরণ nameবৈশিষ্ট্যটি হ'ল , আপনার এখন ঠিক খুব খারাপ পরিস্থিতি রয়েছে।

Comments

আপনার উত্তরের জন্য ধন্যবাদ, আমি যখন এটি পরিবর্তন করেছি তখন আমার ত্রুটি হচ্ছে একটি রেফারেন্স বা ভেরিয়েবলকে বরাদ্দ করতে পারছি না এটি আপনাকে কিছু বলে ??

— আনা

হুম .. এটা অন্য কোথাও হতে পারে। আপনার <input>ভিতরে কি কিছু আছে *ngFor? (সম্ভবত কাজ করবে না তবে চেষ্টা করে দেখুন এবং বার্তাটি চলে গেলে আমাকে বলুন <option *ngFor="let actionType of actionTypes; let i = index" value="{{ actionTypes[i].label }}"> {{ actionTypes[i].label }} </option>:)

— acdcjunior

আপনার কি কোনও <ইনপুট> আছে *ngFor?

— acdcjunior

ভেরিয়েবলের ভিতরে পরিবর্তনের *ngForপরিবর্তে অন্য actionTypeকোনও কিছুর সাথে নাম বদলে দেওয়ার চেষ্টা করুন ?

— acdcjunior

না, তবে আমার কাছে একটি সিলেক্ট ড্রপডাউন তালিকা রয়েছে যা আমি পুনরাবৃত্তি করছি যা আমি জানি না এটি ত্রুটির উত্স কিনা, দয়া করে আমার আপডেট হওয়া প্রশ্নটি দেখুন ...

— আনা

Answer 2

আমি একই সমস্যা সম্মুখীন। আমি app.module.ts এ ফর্মগুলির মডিউল আমদানির ট্যাগটি মিস করেছি

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

@NgModule({
    imports: [BrowserModule,
        FormsModule
    ],

Comments

এই জন্য ধন্যবাদ, এটি দুর্দান্ত কাজ করেছে তবে এটি app.module.ts app.module.componal.ts না হওয়া উচিত

— সেলিম

এটি আমার জন্য কাজ না করে যদিও আমি ইতিমধ্যে আমার app.module মধ্যে FormsModule আমদানি রেখেছি

— emirhosseini

Answer 3

আমারও একই সমস্যা ছিল যা ফর্মস মডেলটি .spec.ts এ যুক্ত করে সমাধান করা হয়েছিল:

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

এবং তারপরে প্রতিটিটিতে আমদানি যুক্ত করুন:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [ FormsModule ],
    declarations: [ YourComponent ]
  })
.compileComponents();
}));

Answer 4

আপনি যদি এটির পরিবর্তে এটি পান তবে:

ত্রুটি: টেমপ্লেট বিশ্লেষণ ত্রুটি:

সেখানে "exportAs" "সেট সঙ্গে কোন নির্দেশ নেই ngModel "

এটি গিথুবে বাগ হিসাবে রিপোর্ট করা হয়েছিল , তবে সম্ভবত এটি সম্ভবত কোনও বাগ নয়:

1. একটি সিনট্যাক্স ত্রুটি রয়েছে (যেমন একটি অতিরিক্ত বন্ধনী [(ngModel)]]=:), বা,
2. হতে প্রতিক্রিয়াশীল রূপ নির্দেশনা মিশ যেমন formControlName, সঙ্গে ngModelনির্দেশ । এটি "কৌণিক v6 এ অবমূল্যায়ন করা হয়েছে এবং কৌণিক v7 এ অপসারণ করা হবে" , যেহেতু এটি উভয় রূপের কৌশল মিশ্রিত করে এটি তৈরি করে:

• প্রকৃত ngModelনির্দেশনাটি ব্যবহার করা হচ্ছে বলে মনে হচ্ছে তবে বাস্তবে এটি ngModelপ্রতিক্রিয়াশীল ফর্ম নির্দেশিকায় নামযুক্ত একটি ইনপুট / আউটপুট সম্পত্তি যা এটির আচরণটি প্রায় (কিছু কিছু) প্রায় অনুমান করে। বিশেষত, এটি মান পেতে / সেট করতে এবং মান ইভেন্টগুলিকে বিরত রাখতে দেয় allows যাইহোক, কিছু ngModel'র অন্যান্য বৈশিষ্ট্য - সাথে আপডেটগুলি দেরি মত ngModelঅপশন বা নির্দেশ রপ্তানি - কেবল না কাজ (...)

• এই প্যাটার্নটি টেমপ্লেট-চালিত এবং প্রতিক্রিয়াশীল ফর্ম কৌশলগুলির সাথে মিশ্রিত হয়, যা আমরা সাধারণত সুপারিশ করি না কারণ এটি কোনও কৌশলের সম্পূর্ণ সুবিধা গ্রহণ করে না । (...)

• ভি 7 এর আগে আপনার কোড আপডেট করার জন্য, আপনি সিদ্ধান্ত নিতে চান প্রতিক্রিয়াশীল ফর্ম নির্দেশাবলী (এবং প্রতিক্রিয়াশীল ফর্মের নমুনা ব্যবহার করে মানগুলি নির্ধারণ করুন) বা টেম্পলেট-চালিত নির্দেশিকায় স্যুইচ করবেন কিনা ।

আপনার যখন এই জাতীয় একটি ইনপুট থাকে:

<input formControlName="first" [(ngModel)]="value">

এটি ব্রাউজারের কনসোলে মিশ্র ফর্ম কৌশলগুলি সম্পর্কে একটি সতর্কতা প্রদর্শন করবে:

দেখে মনে হচ্ছে আপনি ngModelযেমন একই ফর্ম ক্ষেত্রে ব্যবহার করছেন formControlName।

তবে, আপনি যদি ngModelরেফারেন্স ভেরিয়েবলের মান হিসাবে যুক্ত করেন তবে উদাহরণস্বরূপ:

<input formControlName="first" #firstIn="ngModel" [(ngModel)]="value">

উপরের ত্রুটিটি তখন ট্রিগার করা হয় এবং কৌশল মিশ্রণের বিষয়ে কোনও সতর্কতা দেখানো হয় না।

Answer 5

আমার ক্ষেত্রে আমি যোগ করতে ছিল FormsModuleএবং ReactiveFormsModuleকরতে shared.module.tsখুব:

( কোড উদাহরণের জন্য @ ইন্ড্রিয়ামকে ধন্যবাদ ):

import { NgModule }                                 from '@angular/core';
import { CommonModule }                             from '@angular/common';
import { FormsModule, ReactiveFormsModule }         from '@angular/forms';

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { }

Comments

এটি আমার সমস্যা সমাধান করেছে। এটিকে কেবল অ্যাপ্লিকেশনটিতে যোগ করা.মডিউল যথেষ্ট ছিল না

— এমিরহোসেসিনি

Answer 6

আমার এই সমস্যাটি ছিল এবং আমি বুঝতে পারি যে আমি আমার উপাদানটি একটি ভেরিয়েবলের সাথে আবদ্ধ করিনি।

পরিবর্তিত

<input #myComponent="ngModel" />

প্রতি

<input #myComponent="ngModel" [(ngModel)]="myvar" />

Answer 7

Angular2 এ এখন ব্যবহারের সঠিক উপায় হ'ল:

<form  (ngSubmit)="onSubmit()">

        <label>Username:</label>
        <input type="text" class="form-control"   [(ngModel)]="user.username" name="username" #username="ngModel" required />

        <label>Contraseña:</label>
        <input type="password" class="form-control"  [(ngModel)]="user.password" name="password" #password="ngModel" required />


    <input type="submit" value="Entrar" class="btn btn-primary"/>

</form>

পুরানো উপায় আর কাজ করে না

Answer 8

প্রতিক্রিয়াশীল ফর্ম এবং টেমপ্লেট ফর্ম পদ্ধতির একত্রিত করার চেষ্টা করার সময়ও বুঝতে পেরেছিল যে এই সমস্যাটি সামনে আসে। আমি #name="ngModel"এবং [formControl]="name"একই উপাদান ছিল। উভয়কেই সরানো সমস্যার সমাধান করেছে। এছাড়াও নয় যে আপনি যদি ব্যবহার করেন তবে #name=ngModelআপনারও এর মতো কোনও সম্পত্তি থাকা উচিত [(ngModel)]="name", অন্যথায়, আপনি তবুও ত্রুটিগুলি পেয়ে যাবেন। এটি কৌণিক 6, 7 এবং 8 এর ক্ষেত্রেও প্রযোজ্য।

Answer 9

ngModel and nameআপনার নির্বাচনের ক্ষেত্রে আপনার উভয় বৈশিষ্ট্য রয়েছে কিনা তা পরীক্ষা করে দেখুন। এছাড়াও সিলেক্ট একটি ফর্ম উপাদান এবং সম্পূর্ণ ফর্ম নয় তাই স্থানীয় রেফারেন্সের আরও যৌক্তিক ঘোষণা হবে: -

<div class="form-group">
    <label for="actionType">Action Type</label>
    <select
            ngControl="actionType" 
      ===>  #actionType="ngModel"
            ngModel    // You can go with 1 or 2 way binding as well
            name="actionType"
            id="actionType" 
            class="form-control" 
            required>
            <option value=""></option>
            <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
                {{ actionType.label }}
            </option>
        </select> 
    </div>

আরও একটি গুরুত্বপূর্ণ বিষয় হ'ল নিশ্চিত করুন যে আপনি হয় FormsModuleটেমপ্লেট চালিত পদ্ধতির ReactiveFormsModuleক্ষেত্রে বা প্রতিক্রিয়াশীল পদ্ধতির ক্ষেত্রে আমদানি করেন । অথবা আপনি উভয়ই আমদানি করতে পারেন যা পুরোপুরি জরিমানাও।

Answer 10

যদি ngModuleইনপুটটিতে কাজ না করা মানে চেষ্টা করুন ... চারপাশে ডাবল উদ্ধৃতিগুলি সরানngModule

মত

<input #form="ngModel" [(ngModel)]......></input>

পরিবর্তে উপরের

<input #form=ngModel [(ngModel)]......></input> try this

Answer 11

আমার এই সমস্যাটি ছিল কারণ আমার টেমপ্লেটে [(ngModel)]] এর নিকটে টাইপো ছিল। অতিরিক্ত বন্ধনী। উদাহরণ:

<input id="descr" name="descr" type="text" required class="form-control width-half"
      [ngClass]="{'is-invalid': descr.dirty && !descr.valid}" maxlength="16" [(ngModel)]]="category.descr"
      [disabled]="isDescrReadOnly" #descr="ngModel">