Angular2-Fehler: Es gibt keine Direktive mit "exportAs" auf "ngForm".

Ich bin auf dem RC4 und erhalte den Fehler. Es gibt keine Direktive, bei der "exportAs" aufgrund meiner Vorlage auf "ngForm" gesetzt ist :

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

/// also 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?

Seit 2.0.0.rc6 :

Formulare : veraltet provideForms()und disableDeprecatedForms()Funktionen wurden entfernt. Bitte importieren Sie stattdessen das FormsModuleoder das ReactiveFormsModulevon @angular/forms.

Zusamenfassend:

• Wenn Sie vorlagengesteuerte Formulare verwenden , fügen Sie dieseFormsModule zu Ihrem hinzu @NgModule.
• Wenn Sie modellgesteuerte Formulare verwenden, fügenReactiveFormsModule Sie diese hinzu @NgModule.

Fügen Sie also zu Ihremapp.module.ts oder einem gleichwertigen 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 eines dieser Module nicht vorhanden ist, kann dies zu Fehlern führen, einschließlich des folgenden:

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

Kann nicht an 'formGroup' gebunden werden, da es keine bekannte Eigenschaft von 'form' ist.

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

Wenn Sie Zweifel haben, können Sie sowohl das FormsModuleals auch das angebenReactiveFormsModule zusammen , aber sie sind separat voll funktionsfähig. Wenn Sie eines dieser Module bereitstellen, stehen Ihnen die Standardformularanweisungen und -anbieter dieses Moduls app-weit zur Verfügung.

Alte Formen mit ngControl ?

Wenn Sie diese Module zur Verfügung haben @NgModule, verwenden Sie möglicherweise alte Anweisungen, z. B. ngControl, was ein Problem darstellt, da ngControldie neuen Formulare keine enthalten . Es wurde mehr oder weniger ersetzt * durch ersetzt ngModel.

Zum Beispiel das Äquivalent zu <input ngControl="actionType"> ist beispielsweise <input ngModel name="actionType">: Ändern Sie dies in Ihrer Vorlage.

Ebenso ist der Export in Steuerelemente nicht ngFormmehr, es ist jetzt ngModel. Also, in Ihrem Fall, ersetzen Sie #actionType="ngForm"mit#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 ngControlverschoben wurden ngModel. Einige wurden gerade entfernt oder sind jetzt anders. Ein Beispiel ist das nameAttribut, genau der Fall, den Sie gerade haben.

Ich stand vor dem gleichen Problem. Ich hatte das Import-Tag des Formularmoduls in der Datei app.module.ts verpasst

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

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

Ich hatte das gleiche Problem, das durch Hinzufügen des FormsModule zur .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();
}));

Wenn Sie dies stattdessen erhalten:

Fehler: Fehler beim Analysieren von Vorlagen:

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

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

1. habe einen Syntaxfehler (zB eine zusätzliche Klammer :) [(ngModel)]]=, ODER
2. seine Reactive Formen Richtlinien Mischen , wie formControlName, mit der ngModelRichtlinie . Dies "wurde in Angular v6 veraltet und wird in Angular v7 entfernt" , da hierdurch beide Formstrategien gemischt werden , wodurch Folgendes erreicht wird:

• Es scheint, als würde die eigentliche ngModelDirektive verwendet, aber tatsächlich handelt es sich um eine Eingabe- / Ausgabeeigenschaft, die ngModelin der Direktive für reaktive Formulare benannt ist und sich nur (teilweise) ihrem Verhalten annähert. Insbesondere ermöglicht es das Abrufen / Festlegen des Werts und das Abfangen von Wertereignissen. Doch einige ngModelandere Features ‚s - wie Updates mit Verzögerung ngModelOptionen oder die Richtlinie zu exportieren - einfach nicht funktionieren (...)

• Dieses Muster mischt vorlagengesteuerte und reaktive Formularstrategien, die wir im Allgemeinen nicht empfehlen, da es nicht alle Vorteile beider Strategien nutzt . (...)

• Um Ihren Code vor Version 7 zu aktualisieren, sollten Sie entscheiden, ob Sie sich an reaktive Formularanweisungen halten (und Werte mithilfe reaktiver Formularmuster abrufen / festlegen) oder auf vorlagengesteuerte Anweisungen umschalten möchten .

Wenn Sie eine Eingabe wie diese haben:

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

In der Browserkonsole wird eine Warnung zu gemischten Formularstrategien angezeigt:

Es sieht so aus, als würden Sie ngModeldasselbe Formularfeld wie verwenden formControlName.

Wenn Sie jedoch das ngModelals Wert in eine Referenzvariable einfügen, Beispiel:

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

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

In meinem Fall musste ich hinzufügen FormsModuleund ReactiveFormsModuledazu shared.module.ts:

(danke an @Undrium für das Codebeispiel ):

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

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

Die korrekte Verwendung von Formularen in Angular2 lautet:

<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

Dieses Problem tritt auch auf, wenn versucht wird, reaktive Form- und Vorlagenformansätze zu kombinieren. Ich hatte #name="ngModel"und [formControl]="name"auf dem gleichen Element. Durch Entfernen eines der beiden wurde das Problem behoben. Auch nicht, dass, wenn Sie verwenden, #name=ngModelSie auch eine Eigenschaft wie diese haben sollten [(ngModel)]="name", sonst erhalten Sie immer noch die Fehler. Dies gilt auch für die Winkel 6, 7 und 8.

Überprüfen Sie, ob Sie beide ngModel and nameAttribute in Ihrer Auswahl haben. Außerdem ist Select eine Formularkomponente und nicht das gesamte Formular. Eine logischere Deklaration der lokalen Referenz lautet: -

<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 FormsModuleim Fall eines vorlagengesteuerten Ansatzes oder ReactiveFormsModuleim Fall eines reaktiven Ansatzes importieren . Oder Sie können beide importieren, was auch völlig in Ordnung ist.

Wenn ngModuledie Eingabe nicht funktioniert, versuchen Sie, doppelte Anführungszeichen zu entfernenngModule

mögen

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

statt oben

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

Ich hatte dieses Problem, weil ich einen Tippfehler in meiner Vorlage in der Nähe von [(ngModel)] hatte. 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">