Website-Suche

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

Ich bin auf dem RC4 und bekomme den Fehler Es gibt keine Direktive mit "exportAs" auf "ngForm" gesetzt wegen meines Templates :

<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 Dropdown-Liste :

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

//mein Komponentents 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);

Du denkst, es ist die Ursache des Problems??

Antwort #1

Seit 2.0.0.rc6:

Formulare: Die veralteten Funktionen provideForms() und disableDeprecatedForms() wurden entfernt. Bitte importieren Sie stattdessen das FormsModule oder das ReactiveFormsModule von @angular/forms.

Kurz gesagt:

  • Wenn Sie template-gesteuerte Formulare verwenden, fügen Sie FormsModule zu Ihrem @NgModule hinzu.
  • Wenn Sie modellgesteuerte Formulare verwenden, fügen Sie ReactiveFormsModule zu Ihrem @NgModule hinzu.

Also, füge zu deiner app.module.ts oder dem Äquivalent 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 fehlt, kann dies zu Fehlern führen, einschließlich des Fehlers, 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 mit "exportAs", die auf "ngForm" gesetzt ist

Wenn Sie Zweifel haben, können Sie sowohl das FormsModule als auch das ReactiveFormsModule zusammen bereitstellen, aber sie funktionieren auch vollständig getrennt. Wenn Sie eines dieser Module bereitstellen, stehen die standardmäßigen Formulardirektiven und -anbieter aus diesem Modul in der gesamten App zur Verfügung.

Alte Formulare, die ngControl verwenden?

Wenn Sie diese Module in Ihrem @NgModule haben, verwenden Sie vielleicht alte Direktiven, wie ngControl, was ein Problem ist, da es kein ngControl in den neuen Formularen gibt. Es wurde mehr oder weniger* durch ngModel ersetzt.

Zum Beispiel entspricht <input ngControl="actionType"> <input ngModel name="actionType">, also ändern Sie das in Ihrer Vorlage.

Ähnlich ist der Export bei Steuerungen nicht mehr ngForm, sondern jetzt ngModel. Also ersetzen Sie in Ihrem Fall #actionType="ngForm" durch #actionType="ngModel".

Also sollte die resultierende Vorlage (===>s dort, 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 auf ngModel übertragen wurden. Einige wurden einfach entfernt oder sind jetzt anders. Ein Beispiel ist das name-Attribut, genau der Fall, den Sie gerade haben.

Antwort #2

Ich hatte dasselbe Problem. Ich hatte das Import-Tag des Forms-Moduls in der app.module.ts verpasst.

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

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

Verwandte Artikel