pengujian angular2: Tidak dapat mengikat ke 'ngModel' karena ini bukan properti yang dikenal dari 'input'

101

Saya mencoba untuk menguji ikatan dua arah angular2 untuk kontrol input. Inilah kesalahannya:

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

App.component.html

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

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
sumber

Jawaban:

214

Anda perlu mengimpor FormsModuleke TestBedconfigfuration.

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

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

Apa yang Anda lakukan dengan TestBedmengonfigurasi NgModule dari awal untuk lingkungan pengujian. Ini memungkinkan Anda untuk hanya menambahkan apa yang diperlukan untuk pengujian tanpa variabel luar yang tidak perlu yang dapat memengaruhi pengujian.

Paul Samsotha
sumber
42
Benda bersudut ini tampak begitu acak. Terima kasih untuk bantuannya.
Pete B.
11
Setuju, @PeteB. Dependency injection sangat hebat .... itu melakukan segalanya untuk Anda secara otomatis ... JANGAN LUPA IMPOR KE SINI DAN NO_ERROR_SCHEMA dan yada yda ...
Adam Hughes
Ini menghilangkan kesalahan saya, tetapi macet di Karma dan tidak melanjutkan pembuatan komponen lain setelahnya. Sekarang macet tanpa kesalahan.
BlockchainDeveloper
1

Saya memiliki masalah yang sama, bahkan setelah mengimpor modul formulir ini tidak terpecahkan. Jadi saya harus menggunakan alternatif ngModel untuk bidang teks. Silakan periksa tautan ini :

Singkatnya saya telah menggunakan [nilai] untuk mengikat model untuk bidang teks seperti ini.

([value])="searchTextValue"

Selain itu, jika Anda menggunakan bidang tanggal, Anda perlu mengikat model di ts. di html, panggil metode

 (dateSelect)="onDateSelect($event)"

Di script type, gunakan kode berikut, ini hanya berlaku jika Anda menggunakan pemilih 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;
 }
Venkatesh K
sumber
Ini menghemat banyak waktu. Semua kebiasaan ini di tempat tidur uji Angular. Membuatku gila.
ciuman-o-matic