test angular2: impossible de se lier à 'ngModel' car ce n'est pas une propriété connue de 'input'

J'essaie de tester la liaison bidirectionnelle angular2 pour le contrôle input. Voici l'erreur:

Can't bind to 'ngModel' since it isn't a known property of 'input'.

Le app.component.html

<input id="name" type="text" [(ngModel)]="name" />
<div id="divName">{{name}}</div>

Le app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'  
})
export class AppComponent implements OnInit {
  name: string;    
}

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { AppService } from './app.service';
describe('App: Cli', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      providers:[AppService]
    });
  });

  it('divName', async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    let comp = fixture.componentInstance;
    comp.name = 'test';
    fixture.detectChanges();

    let compiled = fixture.debugElement.nativeElement;    
    expect(compiled.querySelector('divName').textContent).toContain('test');
  }));  
});

Vous devez importer le FormsModuledans le TestBedfichier configfuration.

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

TestBed.configureTestingModule({
  imports: [ FormsModule ],
  declarations: [
    AppComponent
  ],
  providers:[AppService]
});

Ce que vous faites avec le, TestBedc'est la configuration d'un NgModule à partir de zéro pour l'environnement de test. Cela vous permet d'ajouter uniquement ce qui est nécessaire pour le test sans avoir de variables externes inutiles qui peuvent affecter le test.

J'ai eu le même problème, même après l'importation du module de formulaires, cela n'a pas été résolu. J'ai donc dû utiliser une alternative à ngModel pour le champ de texte. Veuillez vérifier ce lien :

En résumé, j'avais utilisé [valeur] pour lier le modèle pour le champ de texte comme ceci.

([value])="searchTextValue"

De plus, si vous utilisez un champ de date, vous devez lier le modèle dans ts. dans le html, appelez la méthode

 (dateSelect)="onDateSelect($event)"

Dans le script de type, utilisez le code suivant. Ceci n'est applicable que si vous utilisez le sélecteur Ngbdate.

  onDateSelect(event) {
  let year = event.year;
  let month = event.month <= 9 ? '0' + event.month : event.month;;
  let day = event.day <= 9 ? '0' + event.day : event.day;;
  let finalDate = year + "-" + month + "-" + day;
  this.finalDateVlaue = finalDate;
 }