我正在尝试测试angular2 input
的angular2双向绑定。这是错误:
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');
}));
});
答案 0 :(得分:173)
您需要将FormsModule
导入TestBed
配置。
import { FormsModule } from '@angular/forms';
TestBed.configureTestingModule({
imports: [ FormsModule ],
declarations: [
AppComponent
],
providers:[AppService]
});
您正在使用TestBed
正在为测试环境从头开始配置NgModule。这允许您只添加测试所需的内容,而不会产生可能影响测试的不必要的外部变量。
答案 1 :(得分:1)
我遇到了同样的问题,即使在导入表单模块后也没有解决。所以我不得不对文本字段使用ngModel的替代方法。请检查此link:
总而言之,我已经使用[value]来为像这样的文本字段绑定模型。
([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;
}