Angular FormControl无法加载

Question

我在此处遵循表单上的角教程：https://angular.io/guide/reactive-forms

我在'dataSources.component.html'中有此代码：

<form [formGroup]="queryForm">
<label>Query:
<input type="text" formControlName="query">
</label>

，这在'datasources.component.ts'中：

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'sql-editor',
templateUrl: './datasources.component.html',
styleUrls: ['./datasources.component.scss']
})
export class DatasourcesComponent {
queryForm = new FormGroup({
    query: new FormControl(''),
});

}

我看到它卡在'websocket：待处理'

另外，我最初的目的是使其适用于" Textarea"。解决方案也适用于此吗？

<textarea class="form-control" rows="5" id="sql-query" [formControl]="query"></textarea>-

我正在使用Angular版本7.2：

编辑：我在控制台"无法绑定到" formGroup"中，我看到了此错误，因为它不是"形式"

Answer 1

在您的appModule中导入 ReactiveFormsModule

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
  // other imports ...
  ReactiveFormsModule
 ],
})
export class AppModule { }

Answer 2

formGroup, formControl等都是directives，它们都是ReactiveFormsModule的一部分。

如果要在组件中使用这些directives，则必须在该组件已注册的模块中导入ReactiveFormsModule。或者您必须从其他模块中导出ReactiveFormsModule(例如SharedModule((然后在模块中导入该模块，您已注册此组件。

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
  // other imports ...
  ReactiveFormsModule
 ],
})
export class YourComponentModule { }

还使用如下所示的formcontrols：

<textarea class="form-control" rows="5" id="sql-query" formControlName="query"></textarea>