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

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

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.

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