無法綁定到“ 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();
  });
});