Angular2测试：由于它不是“input”的已知属性，因此无法绑定到“ngModel”

Question

我正在尝试测试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');
  }));  
});

- beewest

Answer 1

你需要将FormsModule导入TestBed配置中。

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

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

你正在使用 TestBed 配置一个用于测试环境的 NgModule，从头开始进行配置。这样可以让你只添加测试所需的内容，避免不必要的外部变量影响测试过程。

- Paul Samsotha

---

这个 Angular 的东西看起来很随意。谢谢你的帮助。 - Pete B.

同意，@PeteB。依赖注入非常强大......它可以自动完成所有任务......只是别忘了在这里导入NO_ERROR_SCHEMA和其他内容... - Adam Hughes

这解决了我的错误，但它在Karma中挂起，并且在创建其他组件之后无法继续。现在被卡住了，没有错误提示。 - BlockchainDeveloper

Answer 2

我曾经遇到过同样的问题，即使导入了表单模块也无法解决。因此，我不得不使用文本字段的ngModel替代方法。请查看链接:

总之，我使用[value]来绑定文本字段的模型，就像这样。

([value])="searchTextValue"

另外，如果您正在使用日期字段，则需要在ts中绑定模型。在html中调用该方法。

(dateSelect)="onDateSelect($event)"

在TypeScript中，使用以下代码。仅当您使用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;
}

- Venkatesh K

---

这节省了我大量的时间。所有这些Angular测试中的怪癖都让我疯了。 - kiss-o-matic