Angular2-Test: Kann nicht an 'ngModel' gebunden werden, da es keine bekannte Eigenschaft von 'input' ist.

Ich versuche, die Zwei-Wege-Bindung von angle2 zur Kontrolle zu testen input. Hier ist der Fehler:

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

Die app.component.html

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

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

Sie müssen das FormsModulein die TestBedKonfiguration importieren.

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

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

Sie TestBedkonfigurieren ein NgModule von Grund auf für die Testumgebung. Auf diese Weise können Sie nur das hinzufügen, was für den Test benötigt wird, ohne unnötige externe Variablen zu haben, die sich auf den Test auswirken können.

Ich hatte das gleiche Problem, auch nach dem Importieren des Formularmoduls wurde dies nicht gelöst. Also musste ich für das Textfeld eine Alternative zu ngModel verwenden. Bitte überprüfen Sie diesen Link :

Zusammenfassend hatte ich [Wert] verwendet, um das Modell für das Textfeld wie folgt zu binden.

([value])="searchTextValue"

Wenn Sie ein Datumsfeld verwenden, müssen Sie das Modell in ts binden. Rufen Sie im HTML die Methode auf

 (dateSelect)="onDateSelect($event)"

Verwenden Sie im Typenskript den folgenden Code. Dies gilt nur, wenn Sie die Ngbdate-Auswahl verwenden.

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