web-dev-qa-db-fra.com

ngModèleChange de formes angulaire 6

Après mise à niveau angulaire 5 à 6

J'ai essayé de mettre à jour mon formulaire: 

anguar 5 j'ai eu: 

 <select [ngModel]="toto" (ngModelChange)="onChange($event)" 

          <option *ngFor="let toto of totos" [ngValue]="toto.id">{{toto.libelle}}</option>

</select>

angular 6 j'ai mis à jour: 

 <select #oldValue="ngModel" [(ngModel)]="toto" (ngModelChange)="onChange(oldValue)" 

          <option *ngFor="let toto of totos" [ngValue]="toto.id">{{toto.libelle}}</option>
</select>

J'ai eu cette erreur: 

compiler.js:215 Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngModel" ("

J'ai FormsModule dans mon app.component.ts

Qu'est-ce que j'oublie? Je vous remercie 

angularformsangular6
2
Viet47

Existe-t-il un nom de variable appelé "toto" dans votre composant, s'il est présent ... Ok

La première est que vous devez fermer correctement la balise de sélection ouverte.

Lorsque vous utilisez [(ngModel)], vous devez définir le nom dans l’élément forrm.

2
Thrilok Kumar Pallaki

La première chose que vous avez manquée, c'est que vous n'avez pas close la balise select.

La deuxième chose que vous devez importer FormsModule and ReactiveFormsModule dans app.module.ts

Fichier HTML

<select #oldValue="ngModel" [(ngModel)]="toto" (ngModelChange)="onChange(oldValue)">

          <option *ngFor="let toto of totos" [ngValue]="toto.id">{{toto.libelle}}</option>
</select>

Dans le fichier app.module.ts

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

Les deux importations ci-dessus doivent être dans la balise ngModule comme ci-dessous

@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule 
   ]
})
0
VIKAS KOHLI

Je pense que vous avez oublié d'ajouter > dans select.

<select #oldValue="ngModel" [(ngModel)]="toto" (ngModelChange)="onChange(oldValue)">
0
baj9032