无法绑定到“formGroup",因为它不是“form"的已知属性 [英] Can't bind to 'formGroup' since it isn't a known property of 'form'
问题描述
情况
我正在尝试在我的 Angular 应用程序中制作一个非常简单的表单,但无论如何,它永远无法工作.
Angular 版本
角 2.0.0 RC5
错误
<块引用>无法绑定到formGroup",因为它不是form"的已知属性
代码
视图
<按钮类型=提交"class="btn btn-default">提交</button></表单>
控制器
import { Component } from '@angular/core';从@angular/forms"导入 { FormGroup, FormControl, Validators, FormBuilder };从@angular/forms"导入 {FormsModule,ReactiveFormsModule};从'./task'导入{任务};@成分({选择器:'任务添加',templateUrl: 'app/task-add.component.html'})导出类 TaskAddComponent {新任务表格:表格组;构造函数(FB:FormBuilder){this.newTaskForm = fb.group({名称:[",Validators.required]});}创建新任务(){console.log(this.newTaskForm.value)}}
ngModule
import { NgModule } from '@angular/core';从'@angular/platform-browser' 导入 { BrowserModule };从'@angular/forms'导入{FormsModule};从'./app.routing'导入{路由};从 './app.component' 导入 { AppComponent };从'./task.service'导入{TaskService}@NgModule({进口:[浏览器模块,路由,表单模块],声明:[ AppComponent ],供应商: [任务服务],引导程序:[ AppComponent ]})导出类 AppModule { }
问题
为什么我会收到这个错误?我错过了什么吗?
RC6/RC7/Final release FIX
要修复此错误,您只需在模块中从 @angular/forms
导入 ReactiveFormsModule
.这是带有 ReactiveFormsModule
导入的基本模块的示例:
import { NgModule } from '@angular/core';从'@angular/platform-browser' 导入 { BrowserModule };从@angular/forms"导入 { FormsModule, ReactiveFormsModule };从 './app.component' 导入 { AppComponent };@NgModule({进口:[浏览器模块,表单模块,响应式表单模块],声明: [应用组件],引导程序:[AppComponent]})导出类 AppModule { }
进一步解释一下,formGroup
是一个名为 FormGroupDirective
的指令的选择器,它是 ReactiveFormsModule
的一部分,因此需要导入它.它用于将现有的 FormGroup
绑定到 DOM 元素.您可以在 Angular 的官方文档页面一>.
RC5 修复
您需要在控制器中import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'
并将其添加到@Component
中的directives
.这将解决问题.
修复该问题后,您可能会收到另一个错误,因为您没有将 formControlName="name"
添加到表单中的输入中.
The situation
I am trying to make what should be a very simple form in my Angular application, but no matter what, it never works.
The Angular version
Angular 2.0.0 RC5
The error
Can't bind to 'formGroup' since it isn't a known property of 'form'
The code
The view
<form [formGroup]="newTaskForm" (submit)="createNewTask()">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" required>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
The controller
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { Task } from './task';
@Component({
selector: 'task-add',
templateUrl: 'app/task-add.component.html'
})
export class TaskAddComponent {
newTaskForm: FormGroup;
constructor(fb: FormBuilder)
{
this.newTaskForm = fb.group({
name: ["", Validators.required]
});
}
createNewTask()
{
console.log(this.newTaskForm.value)
}
}
The ngModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { routing } from './app.routing';
import { AppComponent } from './app.component';
import { TaskService } from './task.service'
@NgModule({
imports: [
BrowserModule,
routing,
FormsModule
],
declarations: [ AppComponent ],
providers: [
TaskService
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
The question
Why am I getting that error? Am I missing something?
RC6/RC7/Final release FIX
To fix this error, you just need to import ReactiveFormsModule
from @angular/forms
in your module. Here's the example of a basic module with ReactiveFormsModule
import:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
To explain further, formGroup
is a selector for directive named FormGroupDirective
that is a part of ReactiveFormsModule
, hence the need to import it. It is used to bind an existing FormGroup
to a DOM element. You can read more about it on Angular's official docs page.
RC5 FIX
You need to import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'
in your controller and add it to directives
in @Component
. That will fix the problem.
After you fix that, you will probably get another error because you didn't add formControlName="name"
to your input in form.
这篇关于无法绑定到“formGroup",因为它不是“form"的已知属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!