Can't bind to 'ngModel' since it isn't a known property of 'textarea'

Question

I receive the following error when running Karma with Jasmine tests:

Can't bind to 'ngModel' since it isn't a known property of 'textarea'.

Although, I have imported FormsModule in my app.module and I have added FormsModule to testBed.

Application itself works correctly, this problem appears only when running Karma.

There are no sub-modules in the application.

I use Angular 4.0.0 with Angular CLI 1.0.4.

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    NoteComponent,
    NotesListComponent,
    AddNoteButtonComponent,
    AboutComponent,
    NoteWrapperComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    CommonModule,
    RouterModule.forRoot([ /** Rest of the code... **/

note.component.html

<textarea title="" class="no-extra n-note__textarea n-note__textarea--transparent" [(ngModel)]="note.description"
              name="description" (blur)="updateNote($event)">
      {{note.description}}
    </textarea>

note.component.spec.js

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpModule } from '@angular/http';

import { expect, assert } from 'chai';

import { NoteComponent } from './note.component';
import { Note } from './note';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';


describe('NoteComponent', () => {
  let component: NoteComponent;
  let fixture: ComponentFixture<NoteComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [NoteComponent],
      imports: [HttpModule, BrowserModule, CommonModule, FormsModule],
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(NoteComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should be defined', () => {
    assert.isDefined(NoteComponent);
  });

  it('should be created', () => {
    expect(component).to.be.an('object');
  });

  describe('public API', () => {
    const note: Note = new Note(1, '', '');

    it('markAsDone method should set done parameter to true', () => {
      component.note = note;
      component.markAsDone();
      expect(note._done).to.be.true;
    });

    it('markAsDiscarded method should set discarded parameter to true', () => {
      component.note = note;
      component.markAsDiscarded();
      expect(note._deleted).to.be.true;
    });

    it('markAsStarred method should set starred parameter to true', () => {
      component.note = note;
      component.markAsStarred();
      expect(note._starred).to.be.true;
    });
  });
});

Nico Nico · Accepted Answer · 2017-10-04T16:24:31

Note I see you have already done this, however, this fixed my problem.

In my spec, I added:

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

And then added FormsModule to the imports section of the text bed config.

Can't bind to 'ngModel' since it isn't a known property of 'textarea'

1 Answers