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

Question

मैं RC4 पर हूँ और मुझे यह त्रुटि मिल रही है कि मेरे टेम्पलेट के कारण "ngForm" के लिए "ExportAs" सेट के साथ कोई निर्देश नहीं है :

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

boot.ts:

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]);

/// तो यहाँ मेरा DropdownList है:

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

// मेरा घटक ts:

मैं इसे इस तरह पुराने रूपों में प्रस्तुत कर रहा था:

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

इन मॉड्यूलों में से किसी एक का सामना करने में असफलताएँ हो सकती हैं, जिसमें आप शामिल हैं:

यह 'इनपुट' की ज्ञात संपत्ति नहीं है, क्योंकि यह 'ngModel' के लिए बाध्य नहीं कर सकता।

इसे 'फ़ॉर्मग्रुप' से नहीं बांध सकते क्योंकि यह 'फ़ॉर्म' की ज्ञात संपत्ति नहीं है

"NgForm" पर सेट "ExportAs" के साथ कोई निर्देश नहीं है

यदि आप संदेह में हैं, तो आप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.component.ts

— सलीम

यह मेरे लिए काम नहीं कर रहा है, भले ही मैंने पहले ही अपने app.module के भीतर FormsModule आयात डाल दिया है

— emirhosseini

Answer 3

मुझे वही समस्या थी जो .spec.ts में FormsModule जोड़कर हल की गई थी:

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

और फिर पहले से आयात को जोड़ना:

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

Answer 4

अगर आपको इसके बदले मिल रहा है:

त्रुटि: टेम्प्लेट पार्स त्रुटियां:

"NgModel" के लिए " ExportAs " सेट के साथ कोई निर्देश नहीं है

जिसे गितुब में बग के रूप में रिपोर्ट किया गया था , तब संभवत: यह बग नहीं है क्योंकि आप कर सकते हैं:

1. एक सिंटैक्स त्रुटि है (जैसे एक अतिरिक्त ब्रैकेट:) [(ngModel)]]=, या
2. हो रिएक्टिव रूपों निर्देशों मिश्रण जैसे, formControlName, साथ ngModelनिर्देश । यह "कोणीय v6 में हटा दिया गया है और इसे कोणीय v7 में हटा दिया जाएगा" , क्योंकि यह दोनों फॉर्म रणनीतियों को मिलाता है, जिससे यह बनता है:

• ऐसा लगता है कि वास्तविक ngModelनिर्देश का उपयोग किया जा रहा है, लेकिन वास्तव में यह एक इनपुट / आउटपुट प्रॉपर्टी है जिसका नाम ngModelप्रतिक्रियात्मक रूप निर्देश पर दिया गया है, जो कि इसके व्यवहार का केवल अनुमान लगाता है। विशेष रूप से, यह मूल्य प्राप्त करने और अवरोधन मूल्य घटनाओं को प्राप्त करने / स्थापित करने की अनुमति देता है। हालांकि, कुछ ngModelअन्य विशेषताएं - जैसे ngModelविकल्पों के साथ अपडेट में देरी करना या निर्देश निर्यात करना - बस काम नहीं करना (...)

• यह पैटर्न टेम्पलेट-चालित और प्रतिक्रियाशील रूपों की रणनीतियों को मिलाता है, जिसे हम आम तौर पर अनुशंसित नहीं करते हैं क्योंकि यह या तो रणनीति के पूर्ण लाभों का लाभ नहीं उठाता है । (...)

• V7 से पहले अपने कोड को अपडेट करने के लिए, आप यह तय करना चाहेंगे कि प्रतिक्रियाशील प्रपत्र निर्देशों के साथ रहना है (और प्रतिक्रियाशील रूपों पैटर्न का उपयोग करके मान प्राप्त करें) या टेम्पलेट-चालित निर्देशों पर स्विच करें ।

जब आपके पास इस तरह का एक इनपुट हो:

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

यह ब्राउज़र के कंसोल में मिश्रित फ़ॉर्म रणनीतियों के बारे में चेतावनी दिखाएगा:

ऐसा लगता है कि आप ngModelउसी फॉर्म फ़ील्ड पर उपयोग कर रहे हैं जैसे कि formControlName।

हालाँकि, यदि आप ngModelसंदर्भ चर में मान के रूप में जोड़ते हैं , उदाहरण:

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

इसके बाद की त्रुटि को ट्रिगर किया गया है और रणनीति मिश्रण के बारे में कोई चेतावनी नहीं दिखाई गई है।

Answer 5

मेरे मामले में मैं जोड़ने के लिए किया था FormsModuleऔर ReactiveFormsModuleकरने के लिए shared.module.tsभी:

( कोड उदाहरण के लिए @Undrium का धन्यवाद ):

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

इससे मेरी समस्या हल हो गई। इसे सिर्फ app.module में जोड़ना पर्याप्त नहीं था

— emirhosseini

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