angular2 testing : Impossible de se lier à 'ngModel' car ce n'est pas une propriété connue de 'input'.

Question

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

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

Le fichier app.component.html

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

Le fichier 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');
  }));  
});

Answer 1

Vous devez importer le FormsModule dans le TestBed configuration.

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

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

Ce que vous faites avec le TestBed est de configurer un NgModule à partir de zéro pour l'environnement de test. Cela vous permet de n'ajouter que ce qui est nécessaire pour le test sans avoir de variables extérieures inutiles qui pourraient affecter le test.

Answer 2

J'ai eu le même problème, même après avoir importé le 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 ceci link :

En résumé, j'avais utilisé [value] 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 le fichier ts. Dans le html, appelez la méthode

(dateSelect)="onDateSelect($event)"

Dans le type script, utilisez le code suivant.Ceci est applicable uniquement si vous utilisez Ngbdate picker.

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