test angular2: impossibile eseguire il binding a "ngModel" poiché non è una proprietà nota di "input"


101

Sto cercando di testare l'associazione a due vie angolare2 per il controllo input. Ecco l'errore:

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

Il file app.component.html

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

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

Risposte:


214

Devi importare il file FormsModulenel file TestBedconfigfuration.

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

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

Quello che stai facendo con TestBedè configurare un NgModule da zero per l'ambiente di test. Ciò consente di aggiungere solo ciò che è necessario per il test senza avere variabili esterne non necessarie che potrebbero influenzare il test.


42
Questa roba angolare sembra così casuale. Grazie per l'aiuto.
Pete B.

11
D'accordo, @PeteB. L'iniezione di dipendenza è così grande ... fa tutto per te automaticamente ... NON DIMENTICARTI DI IMPORTARE QUI E NO_ERROR_SCHEMA e yada yda ...
Adam Hughes

Questo ha eliminato il mio errore, ma si blocca in Karma e non continua a creare gli altri componenti dopo. Ora è bloccato senza errori.
BlockchainDeveloper

1

Ho avuto lo stesso problema, anche dopo aver importato il modulo dei moduli non è stato risolto. Quindi ho dovuto usare un'alternativa a ngModel per il campo di testo. Si prega di controllare questo collegamento :

In sintesi, avevo usato [valore] per associare il modello al campo di testo in questo modo.

([value])="searchTextValue"

Inoltre, se stai usando il campo data, devi legare il modello in ts. in html, chiama il metodo

 (dateSelect)="onDateSelect($event)"

Nello script di tipo, utilizzare il codice seguente, applicabile solo se si utilizza il selettore 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;
 }

Questo mi ha fatto risparmiare un sacco di tempo. Tutte queste stranezze nei banchi di prova angolari. Mi sta facendo impazzire.
kiss-o-matic
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.