Невозможно привязать к formGroup, так как это не известное свойство form. ("в угловых 7

Question

Запуск angular 7 'ng test', он выдает мне ошибку:

Failed: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("

Все, что я видел опубликованное, это в основном «добавление FormsModule и ReactiveFormsModule в app.module» или в любой используемый модулькомпонент.У меня есть только один модуль, и он импортирует их.Карма не смягчается и убивает меня этой ошибкой.

c-runner.component:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-c-runner',
  templateUrl: './c-runner.component.html',
  styleUrls: ['./c-runner.component.scss']
})
export class CRunnerComponent implements OnInit {

  cForm = new FormGroup({
    a_id: new FormControl('', Validators.required),
    u_id: new FormControl('', Validators.required)
  });

  ...
}

app.module:

...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
import { CRunnerComponent } from './c-runner/c-runner.component';

@NgModule({
  declarations: [
    AppComponent,
    CRunnerComponent
  ],
  imports: [
    ...
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

c-runner.html

<div class="container">
  <div class="d-flex justify-content-center h-100">
<div class="card bg-dark">
  <div class="card-header">
    <h3>Run</h3>
  </div>
  <div class="card-body">
    <form (ngSubmit)="runC()" [formGroup]="cForm">
      <div class="input-group form-group">
        <div class="input-group-prepend">
          <span class="input-group-text">File</span>
        </div>
        <select id="a_file" class="form-control" required formControlName="a_id">
          <option value="" disabled selected>Select File</option>
          <option *ngFor="let tf of a_files" [(value)]="tf.id">{{ tf.filename }}</option>
        </select>
      </div>
      <div class="input-group form-group">
        <div class="input-group-prepend">
          <span class="input-group-text">File</span>
        </div>
        <select id="u_file" name="u_file" class="form-control" required formControlName="u_id">
          <option value="" disabled selected>Select File</option>
          <option *ngFor="let tf of u_files" [(value)]="tf.id">{{ tf.filename }}</option>
        </select>
      </div>
      <div class="form-group">
        <input type="submit" value="Run" class="btn btn-secondary float-right" [disabled]="!cForm.valid">
      </div>
    </form>
  </div>
</div>

Answer 1

cgTag был на правильном пути.Тестовый стенд изменен, чтобы включить в него кучу импортных данных, как показано нижеНадеюсь, что это поможет кому-то в будущем!

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CRunnerComponent } from './c-runner.component';
import { Component } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterTestingModule } from '@angular/router/testing';

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

  @Component({
    selector: 'app-upload-modal',
    template: '',
    inputs: ['filenames', 'upload_type']
  })
  class MockUploadModalComponent {}

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        CRunnerComponent,
        MockUploadModalComponent
      ],
      imports: [
        FormsModule,
        ReactiveFormsModule,
        HttpClientModule,
        RouterTestingModule
      ]
    })
    .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});