无法绑定到“formGroup”，因为它不是“form”的已知属性。 (" 在角度 7答案

【问题标题】：Can't bind to 'formGroup' since it isn't a known property of 'form'. (" in angular 7无法绑定到“formGroup”，因为它不是“form”的已知属性。 (" 在角度 7
【发布时间】：2019-03-18 14:40:48
【问题描述】：

运行 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>

【问题讨论】：

尝试停止你的cli并重新启动它..
“'ng test'，它给了我错误”：所以你得到了 c-runner.component.spec？请出示。
将模块导入您的TestBed

标签： javascript html angular angular7

【解决方案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();
  });
});

【讨论】：