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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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