angular2 Testing: 'input'の既知のプロパティではないため、 'ngModel'にバインドできません


101

angular2双方向バインディングの制御をテストしようとしていinputます。ここにエラーがあります:

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

回答:


213

あなたは、インポートする必要があるFormsModuleTestBedconfigfuration。

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

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

あなたがやっているのTestBedは、テスト環境用にゼロからNgModuleを設定することです。これにより、テストに影響を与える可能性のある不要な外部変数を持たずに、テストに必要なものだけを追加できます。


42
この角度のものはとてもランダムに見えます。ご協力ありがとうございました。
ピートB.17年

11
同意し、@ PeteB。依存性注入は非常に優れています。...自動的にすべてを行います...こことNO_ERROR_SCHEMAとyada ydaをインポートすることを忘れないでください
Adam Hughes

これは私のエラーを取り除きましたが、それはKarmaでハングし、その後他のコンポーネントを作成し続けません。エラーなしでスタックしています。
BlockchainDeveloper 2018

1

フォームモジュールをインポートした後でも、同じ問題が発生しましたが、これは解決されませんでした。したがって、テキストフィールドにはngModelの代わりに使用する必要がありました。このリンクを確認してください

要約すると、[値]を使用して、このようなテキストフィールドのモデルをバインドしていました。

([value])="searchTextValue"

また、日付フィールドを使用している場合は、モデルをtsにバインドする必要があります。HTMLで、メソッドを呼び出します

 (dateSelect)="onDateSelect($event)"

タイプスクリプトでは、次のコードを使用します。これは、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;
 }

これにより、時間を大幅に節約できました。Angularテストベッドにおけるこれらすべての癖。私を狂わせる。
kiss-o-matic
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.