Question

我在这里关注有关表单的Angular教程： 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”中看到此错误，因为它不是“ form”的已知属性

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。或者，必须导出{ {1}}（从其他模块（例如，ReactiveFormsModule）开始，然后将该模块导入您已在其中注册了此组件的模块中。

SharedModule

还使用如下所示的表单控件：

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
imports: [
  // other imports ...
  ReactiveFormsModule
 ],
})
export class YourComponentModule { }

Angular FormControl无法加载

2 个答案: