Erreur Angular2: Il n'y a pas de directive avec "exportAs" défini sur "ngForm"

Question

je suis sur la RC4 et j'obtiens le message d'erreur Il n'y a pas de directive "exportAs" set "ngForm" parce que de mon modèle :

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

le démarrage.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]);

/// alors voici mon 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>

//mon composant ts :

j'ai été représentant dans les formes anciennes comme ceci :

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

et maintenant, je suis en train de faire ceci :

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

vous pensez que c'est la cause du problème ??

Answer 1

Depuis la version 2.0.0.rc6:

formes: obsolète, provideForms() et disableDeprecatedForms() fonctions ont été supprimées. Veuillez importer l' FormsModule ou ReactiveFormsModule de @angular/forms à la place.

En bref:

• Si vous utilisez le modèle axé sur les formulaires, ajoutez - FormsModule votre @NgModule.
• Si vous utilisez le modèle des formulaires, ajoutez - ReactiveFormsModule votre @NgModule.

Donc, ajouter à vos app.module.ts ou l'équivalent:

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

À défaut de disposer de l'un de ces modules peut conduire à des erreurs, y compris celui que vous avez à faire face:

Ne peut pas se lier à 'ngModel', car il n'est pas connu de la propriété de 'entrée'.

Ne peut pas se lier à 'formGroup', car il n'est pas connu de la propriété de la "forme"

Il n'existe pas de directive "exportAs" set "ngForm"

Si vous êtes dans le doute, vous pouvez fournir à la fois l' FormsModule et de la ReactiveFormsModule ensemble, mais ils sont entièrement fonctionnels séparément. Lorsque vous fournir l'un de ces modules, les formulaires par défaut directives et les fournisseurs de ce module sera disponible pour vous app.

---

Les anciens Formulaires à l'aide de ngControl?

Si vous avez les modules à votre @NgModule, vous utilisez peut-être les anciennes directives, telles que l' ngControl, ce qui est un problème, car il n'y a pas d' ngControl dans de nouvelles formes. Il a été remplacé plus ou moins* en ngModel.

Par exemple, l'équivalent d' <input ngControl="actionType"> est <input ngModel name="actionType">, sorte de changement dans votre modèle.

De même, l'exportation, dans les contrôles n'est pas ngForm plus, il est désormais ngModel. Donc, dans votre cas, remplacez - #actionType="ngForm" avec #actionType="ngModel".

De sorte que le montant de modèle devrait être (===>s où ils ont changé):

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

* Plus ou moins parce que pas toutes les fonctionnalités de l' ngControl a été déplacé à l' ngModel. Certains ont été supprimés ou sont différentes maintenant. Un exemple en est l' name d'attribut, le très le cas où vous êtes en ce moment.

Answer 2

J'ai fait face au même problème. J'avais manqué la balise d'importation du module de formulaires dans app.module.ts

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

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

Answer 3

J'ai eu le même problème qui a été résolu en ajoutant le FormsModule au fichier .spec.ts:

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

puis en ajoutant l'importation à beforeEach:

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

Answer 4

Dans mon cas, j'ai dû ajouter FormsModule et ReactiveFormsModule au shared.module.ts aussi:

(merci à @Undrium pour l' exemple de code ):

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

Answer 5

Les formes d'utilisation correctes dans Angular2 sont les suivantes:

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

L'ancienne méthode ne fonctionne plus