angular2 тестирование: невозможно привязать к 'ngModel', поскольку это не известное свойство 'input'


103

Я пытаюсь проверить двустороннюю привязку 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');
  }));  
});

Ответы:


216

Вам необходимо импортировать файл FormsModuleв TestBedconfigfuration.

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

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

Что вы делаете с этим, так TestBedэто настраиваете NgModule с нуля для тестовой среды. Это позволяет вам добавлять только то, что необходимо для теста, без лишних внешних переменных, которые могут повлиять на тест.


42
Этот угловатый материал кажется таким случайным. Спасибо за помощь.
Pete B.

11
Согласен, @PeteB. Внедрение зависимостей так здорово .... оно делает все за вас автоматически ... ПРОСТО НЕ ЗАБУДЬТЕ ИМПОРТИРОВАТЬ ЗДЕСЬ, И NO_ERROR_SCHEMA и yada yda ...
Адам Хьюз

Это избавило меня от ошибки, но она зависает в Karma и после этого не создает другие компоненты. Теперь он застрял без ошибок.
BlockchainDeveloper

1

У меня была такая же проблема, даже после импорта модуля форм она не была решена. Поэтому мне пришлось использовать альтернативу ngModel для текстового поля. Пожалуйста, проверьте эту ссылку :

Таким образом, я использовал [значение] для привязки модели к текстовому полю, как это.

([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. Сводит меня с ума.
kiss-o-matic
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.