web-dev-qa-db-fra.com

ngModel ne fonctionne pas dans Angular4

J'apprends Angular 4 du site officiel et je suis arrivé à la partie avec liaison de données bidirectionnelle via ngModel . Cependant, mon application cesse de fonctionner dès que j'ajoute [(ngModel)] à mon modèle de composant, même si le FormsModule est importé dans le fichier module.ts. le composant ne se charge pas.
J'utilise Visual Studio Code.
Ceci est mon app.component.ts

import { Component } from '@angular/core';

    export class Hero {
      id: number;
      name: string;
    }



    @Component({
      selector: 'app',
      template: `
      <h1>{{ title }}</h1>
      <h2>{{hero.name}} details!</h2>
      <div><label>Id:</label> {{hero.id}} </div>
      <div>name:<input [(ngModel)]="hero.name" type="text"></div>
      `,
      styles:[`
        .selected{
          transition: padding 0.3s;
          color: mediumseagreen;
        }
      `]
    })

    export class AppComponent {
      title = 'Tour Of Heroes';

     hero:Hero = {
       id:1,
       name:"Mr. Invisible"
     };
    }

C'est app.module.ts

import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

    import { AppComponent, Hero } from './app.component';

    @NgModule({
      declarations: [
        AppComponent,
        FormsModule
      ],
      imports: [
        BrowserModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

L'AppComponent n'est pas chargé et montre juste

Chargement...

angularngmodel
10
Mavil
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

    import { AppComponent, Hero } from './app.component';

    @NgModule({
      declarations: [
        AppComponent

      ],
      imports: [
        BrowserModule,
        FormsModule  // forms module should be in imports not in declarations
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
19
Rahul Singh
// add the import in module and add FormModule in import:
import { NgModule } from '@angular/core'
 imports: [
    BrowserModule,
   // add FormModule in import
    FormsModule
]
3
rahul kumar

En plus de FormsModule nécessaire dans la section imports de la déclaration de module, vous devez utiliser une balise form ou une directive ngForm pour activer la ngModel fonctionnalités.

Sans vous pouvez également utiliser un contrôle autonome pour utiliser ngModel comme ceci:

 <input [(ngModel)]="variable" #ctrl="ngModel" >

Source: documentation angulaire

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

Puis à @NgModule(){imports:[FormsModule]} avec d'autres membres du personnel

0
Yuresh Karunanayake