无法绑定到“ formGroup”，因为它不是“ form”的已知属性。 （“角7

Question

Running angular 7 'ng test', it gives me the error:

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

Everything I've seen posted is basically 'add FormsModule and ReactiveFormsModule to app.module' or to whatever module is using the component. I've only got the one module, and it is importing them. Karma is not relenting though, and is killing me with this error.

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 was on the right track. Test bed changed to include a bunch of imports as shown below. Hope this helps someone in the future!

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();
  });
});