javascript - 无法绑定到“formGroup”,因为它不是“form”的已知属性。(" 在角度 7
问题描述
运行 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)
});
...
}
应用程序模块:
...
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>
解决方案
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();
});
});
推荐阅读
- python - 如何在不包含父目录的 Python/tar 中创建 tar.gz 存档?
- regex - 使用正则表达式在特定 div 之前获取链接文本
- android - 带有活动和片段的 Android 工具栏
- javascript - 链接承诺并添加要与后续承诺一起返回的附加数据
- vb.net - 更改 Resources.resx 属性后命名空间路径损坏
- javascript - 如何使用 HTML/JavaScript 获取另一个网页的页面源?
- java - Android mutableListof(pair(k,v) --> pair value empty 如果我清除变量但我在 clear() 之前添加 mutableListof ... 为什么会为空?
- mysql - Laravel 5.7 - when() 函数中的高级 where() 查询
- css - 具有真实世界比例和比例的不同尺寸图像的响应式网格
- c# - 如何在 switch 语句中比较文本框中的值?