[testing] angular2 테스트 : ‘input’의 알려진 속성이 아니기 때문에 ‘ngModel’에 바인딩 할 수 없습니다.

Program / 글쓴이

제어를 위해 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');
  }));
});

답변

당신은 가져와야 FormsModule에 TestBedconfigfuration.

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

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

으로 수행하는 작업 TestBed은 테스트 환경을 위해 처음부터 NgModule을 구성하는 것입니다. 이를 통해 테스트에 영향을 줄 수있는 불필요한 외부 변수없이 테스트에 필요한 것만 추가 할 수 있습니다.

답변

양식 모듈을 가져온 후에도 동일한 문제가 해결되지 않았습니다. 그래서 텍스트 필드에 ngModel 대신에 대안을 사용해야했습니다. 이 링크를 확인 하십시오 :

요약하면 [value]를 사용하여 이와 같은 텍스트 필드의 모델을 바인딩했습니다.

([value])="searchTextValue"

또한 날짜 필드를 사용하는 경우 ts에서 모델을 바인딩해야합니다. html에서 메소드를 호출하십시오.

 (dateSelect)="onDateSelect($event)"

유형 스크립트에서 다음 코드를 사용합니다.이 코드는 Ngbdate 선택기를 사용하는 경우에만 적용됩니다 .This is applied only if you are using Ngbdate picker.

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

답변