web-dev-qa-db-ger.com

Angular2-Fehler: Es gibt keine Direktive, bei der "exportAs" auf "ngForm" gesetzt ist

ich bin auf der RC4 und erhalte den Fehler Es gibt keine Direktive mit "exportAs", die auf "ngForm" gesetzt ist aufgrund meiner Vorlage

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

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

/// hier ist meine 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>

// meine Komponente ts:

ich habe es in den alten Formen so dargestellt: 

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

und jetzt mache ich das: 

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

sie denken, es ist die Ursache des Problems?

80
Anna

Seit 2.0.0.rc6 :

forms: veraltete provideForms()- und disableDeprecatedForms()-Funktionen wurden entfernt. Bitte importieren Sie stattdessen FormsModule oder ReactiveFormsModule aus @angular/forms.

Zusamenfassend:

Füge also zu deinem app.module.ts oder einem gleichwertigen Element hinzu:

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

Wenn Sie eines dieser Module nicht haben, kann dies zu Fehlern führen, einschließlich desjenigen, dem Sie gegenüberstehen:

Kann nicht an 'ngModel' binden, da es keine bekannte Eigenschaft von 'input' ist.

Kann nicht an 'formGroup' binden, da es keine bekannte Eigenschaft von 'form' ist

Es gibt keine Direktive, bei der "exportAs" auf "ngForm" gesetzt ist.

Wenn Sie sich nicht sicher sind, können Sie Sie können beides angeben die FormsModule und die ReactiveFormsModule zusammen, aber sie sind voll funktionsfähig. Wenn Sie eines dieser Module bereitstellen, stehen Ihnen die Standardformularanweisungen und -anbieter dieses Moduls für die gesamte Anwendung zur Verfügung. 


Alte Formulare mit ngControl?

Wenn Sie diese Module in Ihrem @NgModule haben, verwenden Sie möglicherweise alte Anweisungen wie ngControl. Dies ist ein Problem, da in den neuen Formularen kein ngControl vorhanden ist. Es wurde mehr oder weniger * durch ngModel ersetzt.

Das Äquivalent zu <input ngControl="actionType"> lautet beispielsweise <input ngModel name="actionType">. Ändern Sie dies in Ihrer Vorlage.

Ebenso ist der Export in Controls nicht mehr ngForm, sondern jetzt ngModel. Ersetzen Sie also in Ihrem Fall #actionType="ngForm" durch #actionType="ngModel".

Die resultierende Vorlage sollte also (===>s wo geändert) sein:

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

* Mehr oder weniger, weil nicht alle Funktionen von ngControl nach ngModel verschoben wurden. Einige wurden einfach entfernt oder sind jetzt anders. Ein Beispiel ist das Attribut name, genau in diesem Fall.

69
acdcjunior

Ich stand vor demselben Problem. Ich hatte den Import-Tag des Formularmoduls in app.module.ts vermisst

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

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

Ich hatte das gleiche Problem, das durch Hinzufügen des FormsModule zu den .spec.ts behoben wurde:

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

und dann den Import zu beforeEach hinzufügen:

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

In meinem Fall musste ich auch FormsModule und ReactiveFormsModule zum shared.module.ts hinzufügen: 

(Danke an @Undrium für das code Beispiel ):

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

Die korrekte Form der Verwendung von Formularen in Angular2 lautet nun:

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

Der alte Weg funktioniert nicht mehr

2
ioses

Ich hatte dieses Problem und stellte fest, dass ich meine Komponente nicht an eine Variable gebunden hatte.

Geändert

<input #myComponent="ngModel" />

zu

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

2
birwin

Dieses Problem tritt auch auf, wenn versucht wird, Ansätze für reaktive Formulare und Vorlagenformulare zu kombinieren. Ich hatte #name="ngModel" und [formControl]="name" auf demselben Element. Das Entfernen von einem der beiden behebt das Problem. Auch nicht, dass, wenn Sie #name=ngModel verwenden, Sie auch eine Eigenschaft wie diese [(ngModel)]="name" haben sollten, sonst erhalten Sie immer noch die Fehler. Dies gilt auch für angular 6, 7 und 8.

0
Samuel Mutemi

Vergewissern Sie sich, dass Sie beide ngModel and name-Attribute in Ihrer Auswahl haben. Auch Select ist eine Formularkomponente und nicht das gesamte Formular, so dass eine logischere Deklaration der lokalen Referenz gilt: -

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

Eine weitere wichtige Sache ist, dass Sie entweder FormsModule im Fall von Template Driven Approach oder ReactiveFormsModule im Fall Reactive Approach importieren. Oder Sie können beide importieren, was auch völlig in Ordnung ist.

0
Rohan Shenoy

Ich hatte dieses Problem, da sich in meiner Vorlage in der Nähe von [(ngModel)]] ein Tippfehler befand. Zusätzliche Halterung. Beispiel:

<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">
0
Raman Zhylich

Wenn Sie das stattdessen bekommen:

Fehler: Fehler bei der Vorlagenanalyse: 

Es gibt keine Direktive, für die "exportAs" auf "ngModel" gesetzt ist.

Was wurde als Fehler in Github gemeldet , dann ist es wahrscheinlich kein Fehler, da Sie vielleicht:

  1. haben einen Syntaxfehler (z. B. eine zusätzliche Klammer: [(ngModel)]]=), ODER
  2. sei Mischanweisungen für reaktive Formulare, wie formControlName, mit der ngModel-Direktive. Dieses "wurde in Angular v6 nicht mehr unterstützt und wird in Angular v7 entfernt" , da hier beide Formstrategien gemischt werden.
  • es scheint, als würde die ngModel-Direktive verwendet, aber in der Tat handelt es sich um eine Eingabe-/Ausgabeeigenschaft mit dem Namen ngModel in der reaktiven Form-Direktive, die (teilweise) ihr Verhalten nur annähert. Insbesondere ermöglicht es das Abrufen/Setzen des Werts und das Abfangen von Wertereignissen. Einige der anderen Funktionen von ngModel - wie das Aktualisieren mitngModelOptions verzögern oder die Direktive exportieren - funktioniert einfach nicht (...)

  • dieses Muster mischt schablonengesteuerte und reaktive Formularstrategien, die wir empfehlen dies im Allgemeinen nicht, da es nicht die vollen Vorteile einer der beiden Strategien nutzt. (...)

  • Um Ihren Code vor Version 7 zu aktualisieren, müssen Sie entscheiden, ob Sie bei Anweisungen für reaktive Formulare bleiben} (und Werte mithilfe reaktiver Formularmuster abrufen/festlegen) oder auf vorlagengesteuerte Anweisungen umschalten

Wenn Sie eine Eingabe wie diese haben:

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

In der Browserkonsole wird eine Warnung zu gemischten Formularstrategien angezeigt:

Anscheinend verwenden Sie ngModel in demselben Formularfeld wie formControlName

Wenn Sie jedoch die Variable ngModel als Wert in einer Referenzvariablen hinzufügen, wird Folgendes verwendet:

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

Der obige Fehler wird dann ausgelöst und es wird keine Warnung bezüglich der Strategiemischung angezeigt.

0
CPHPython