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


101

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

Réponses:


214

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.


42
Ce truc anguleux semble si aléatoire. Merci de votre aide.
Pete B.

11
D'accord, @PeteB. L'injection de dépendance est tellement géniale .... elle fait tout pour vous automatiquement ... N'OUBLIEZ PAS D'IMPORTER ICI ET NO_ERROR_SCHEMA et yada yda ...
Adam Hughes

Cela a éliminé mon erreur, mais cela se bloque dans Karma et ne continue pas à créer les autres composants après. Il est bloqué maintenant sans erreur.
BlockchainDeveloper

1

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

Cela m'a fait gagner beaucoup de temps. Toutes ces bizarreries dans les bancs d'essai angulaires. Me rend fou.
kiss-o-matic
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.