testowanie angular2: nie można powiązać z „ngModel”, ponieważ nie jest to znana właściwość „input”


101

Próbuję przetestować dwukierunkowe wiązanie angular2 dla kontroli input. Oto błąd:

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

Plik app.component.html

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

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

Odpowiedzi:


214

Musisz zaimportować FormsModuledo TestBedkonfiguracji.

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

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

To, co robisz z TestBedprogramem, to konfigurowanie od podstaw NgModule dla środowiska testowego. Pozwala to na dodawanie tylko tego, co jest potrzebne do testu, bez niepotrzebnych zmiennych zewnętrznych, które mogą wpływać na test.


42
Te kanciaste rzeczy wydają się takie przypadkowe. Dziękuję za pomoc.
Pete B.

11
Zgoda, @PeteB. Wstrzykiwanie zależności jest tak wspaniałe ... robi wszystko za Ciebie automagicznie ... PO PROSTU NIE ZAPOMNIJ TUTAJ IMPORTOWAĆ I NO_ERROR_SCHEMA i yada yda ...
Adam Hughes

Pozbyło się to mojego błędu, ale zawiesza się w Karmie i nie kontynuuje tworzenia innych komponentów po. Utknęła teraz bez błędu.
BlockchainDeveloper

1

Miałem ten sam problem, nawet po zaimportowaniu modułu formularzy nie został on rozwiązany. Musiałem więc użyć alternatywy dla ngModel dla pola tekstowego. Proszę to sprawdzić link :

Podsumowując, użyłem [wartość], aby powiązać model dla pola tekstowego w ten sposób.

([value])="searchTextValue"

Ponadto, jeśli używasz pola daty, musisz powiązać model w ts. w html wywołaj metodę

 (dateSelect)="onDateSelect($event)"

W skrypcie typu użyj następującego kodu. Ma to zastosowanie tylko wtedy, gdy używasz selektora 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;
 }

To zaoszczędziło mi mnóstwo czasu. Wszystkie te dziwactwa w łóżkach testowych Angular. Wkurza mnie.
kiss-o-matic
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.