Discussion :

[corv0]

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

[dukoid]

app.module.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[corv0]

Bonjour DUKOID,

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

[corv0]

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

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 :

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

[corv0]

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 :

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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

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

Sélectionner tout - Visualiser dans une fenêtre à part

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