angular2 测试：无法绑定到“ngModel”，因为它不是“输入”的已知属性答案

【问题标题】：angular2 testing: Can't bind to 'ngModel' since it isn't a known property of 'input'angular2 测试：无法绑定到“ngModel”，因为它不是“输入”的已知属性
【发布时间】：2017-01-27 19:32:11
【问题描述】：

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

【问题讨论】：

标签： testing angular angular-cli angular2-testing

【解决方案1】：

您需要将FormsModule 导入到TestBed 配置中。

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

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

您对TestBed 所做的是从头开始为测试环境配置 NgModule。这允许您只添加测试所需的内容，而无需添加可能影响测试的不必要的外部变量。

【讨论】：

这个有角度的东西看起来很随意。感谢您的帮助。
同意，@PeteB。依赖注入太棒了......它会自动为你做所有事情......只是不要忘记在此处导入并且 NO_ERROR_SCHEMA 和 yada yda......
这消除了我的错误，但它挂在 Karma 中并且之后不会继续创建其他组件。现在卡住了，没有错误。

【解决方案2】：

我遇到了同样的问题，即使在导入表单模块之后也没有解决。所以我不得不为文本字段使用 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;
}

【讨论】：

这为我节省了大量时间。 Angular 测试台中的所有这些怪癖。把我逼疯了。