angular2 測試：無法綁定到“ngModel”，因為它不是“input”的已知屬性

Question

我正在嘗試測試控制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');
  }));  
});

Answer 1

您需要將FormsModule導入到TestBed配置中。

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

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

您使用TestBed是從頭開始為測試環境配置 NgModule。 這允許您只添加測試所需的內容，而不會添加可能影響測試的不必要的外部變量。

Answer 2

我有同樣的問題，即使在導入表單模塊后也沒有解決。 所以我不得不在文本字段中使用 ngModel 的替代品。 請檢查此鏈接：

總之，我使用 [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;
}