[Angular 2] ERREUR There is no directive with "exportAs" set to "ngForm"

Version imprimable

Bonjour à toutes et à tous, Bonne Année et bonne santé.

Pour cette année 2017 j'ouvre un nouveau post concernant un petit problème que je rencontre actuellement sur Angular 2

Je m'amuse un peu à découvrir cette plateforme et je commence avec un formulaire. Mais je n'arrive pas à l'afficher...

Voici tout d'abord mon erreur : Unhandled Promise rejection: Template parse errors: There is no directive with "exportAs" set to "ngForm"

Voici mon code :

app.module.ts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { ClientFormComponent }  from './client-form-component';
 
@NgModule({
 
  imports: [BrowserModule],
  declarations: [ AppComponent,ClientFormComponent ],
  bootstrap: [ AppComponent ],
})
 
export class AppModule { }

client-form-component.ts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Component }  from '@angular/core';
import { User }       from './user';
 
@Component({
  selector: 'client-form',
  templateUrl: 'client-form.html',
  styleUrls: ['../assets/app.component.css']
})
 
export class ClientFormComponent {
 
  private roles = ['Administrateur', 'Editeur', 'Rédacteur', 'Utilisateur'];
  private user = new User('Anthony', this.roles[1]);
 
  onSubmit(): void {
    console.log(this.user);
  }
}

app.module.ts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { ClientFormComponent }  from './client-form-component';
 
@NgModule({
 
  imports: [BrowserModule],
  declarations: [ AppComponent,ClientFormComponent ],
  bootstrap: [ AppComponent ],
})
 
export class AppModule { }

et pour finir : client-form.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="container">
  <h1>Formulaire client</h1>
  <form (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label for="name">Nom</label>
      <input id="name" type="text" class="form-control" required
        [(ngModel)]="user.name"
        #name="ngForm">
      <span [hidden]="name.valid" class="text-danger">Vous devez entrer un nom !</span>
    </div>
    <div class="form-group">
      <label for="role">Rôle</label>
      <select id="role" class="form-control"
        [(ngModel)]="user.role">
        <option *ngFor="let role of roles" [value]="role">{{ role }}</option>
      </select>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  L'utilisateur s'appel {{ user.name }} et c'est un {{ user.role }}.
</div>

Si quelqu'un a la solution je suis preneur :)

Cordialement

app.module.ts

Code:

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

Code:

1
2
3
4
 
  imports: [
...
    FormsModule,

03/01/2017, 09h20
corv0

Bonjour DUKOID,

Merci de ton intérêt pour mon problème.
Je n'ai pas très bien compris ta réponse.

Suite à une réponse provenant d'un autre forum,
j'ai reçu un tuyau, je vous le partage =)

Citation:

Bonjour.

Il ne trouve aucune @Directive ayant la propriété exportAs à ngModel.
Cela vient du fait qu'il ne trouve simplement pas la directive NgModel.
Et pour en arriver à la cause, c'est parce que tu n'as pas importé le module FormsModule.

(tu aurais un message disant que ngModel n'est pas un attribut connu si tu n'avais pas défini de variable)

Donc mon nouveau Code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { ClientFormComponent } from './client-form.component'; @NgModule({ declarations: [ AppComponent, ClientFormComponent, ], imports: [ BrowserModule, FormsModule, HttpModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
mais le problème persiste toujours

Les amis merci beaucoup pour vos diverses réponses. j'ai réussi à me débug.

J'affiche le programme pour les novices comme moi qui découvrent petit à petit la plateforme Angular 2.

APP.MODULE.TS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgForm } from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
 
import { AppComponent } from './app.component';
import { ClientFormComponent } from './client-form.component';
 
@NgModule({
  declarations: [
    AppComponent,
    ClientFormComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

APP.COMPONENT.TS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
import { Component } from '@angular/core';
import {NgForm} from '@angular/forms';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
 
export class AppComponent {
 
}

CLIENT-FORM.COMPONENT.TS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { Component }  from '@angular/core';
import { User }       from './user'; 
import {NgForm} from '@angular/forms';
 
@Component({
  selector: 'client-form',
  templateUrl: './client-form.html',
  styles: [`
    .ng-valid { border-color: green; }
    .ng-invalid { border-color: red; }    
  `]
})
export class ClientFormComponent {
 
  private roles = ['Administrateur', 'Editeur', 'Rédacteur', 'Utilisateur'];
  private user = new User('Martin', this.roles[1]);
 
  onSubmit(): void {
    console.log(this.user); 
  }
}

CLIENT_FORM.HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="container">
  <h1>Formulaire client</h1>
  <form (ngSubmit)="onSubmit()" #name="ngForm">
    <div class="form-group">
      <label for="name">Nom</label>
      <input id="name" type="text" class="form-control" name="userName" required [(ngModel)]="user.name">
      <span [hidden]="name.valid" class="text-danger">Vous devez entrer un nom !</span>
    </div>
    <div class="form-group">
      <label for="role">Rôle</label>
      <select id="role" class="form-control" name="userRole" [(ngModel)]="user.role">
        <option *ngFor="let role of roles" [value]="role">{{ role }}</option>
      </select>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  L'utilisateur s'appel {{ user.name }} et c'est un {{ user.role }}.
</div>

APP.COMPONENT.HTML

Code:

1
2
3
4
5
<h1>
  {{title}}
</h1>
 
<client-form></client-form>