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

101

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

Antworten:

213

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.

Paul Samsotha
quelle
42
Dieses eckige Zeug scheint so zufällig. Danke für Ihre Hilfe.
Pete B.
11
Einverstanden, @PeteB. Die Abhängigkeitsinjektion ist so großartig ... sie erledigt alles automatisch für Sie ... VERGESSEN SIE NICHT, HIER UND NO_ERROR_SCHEMA und yada yda zu importieren ...
Adam Hughes
Dies hat meinen Fehler beseitigt, aber es hängt in Karma und erstellt die anderen Komponenten danach nicht weiter. Es steckt jetzt ohne Fehler fest.
BlockchainDeveloper
1

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;
 }
Venkatesh K.
quelle
Das hat mir eine Menge Zeit gespart. All diese Macken in Winkelprüfständen. Macht mich verrückt.
kiss-o-matic