无法绑定到"formGroup",因为它不是"form"的已知属性 [英] Can't bind to 'formGroup' since it isn't a known property of 'form'
问题描述
情况:
请帮助!我正在尝试使Angular2应用程序中的表单变得非常简单,但是无论它永远无法正常工作.
语言版本:
Angular 2.0.0 Rc5
错误:
Can't bind to 'formGroup' since it isn't a known property of 'form'
代码:
视图:
<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>
控制器:
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)
}
}
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 { }
问题:
为什么会出现该错误?
我想念什么吗?
RC5 FIX
您需要在控制器中import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'
并将其添加到@Component
中的directives
.这样可以解决问题.
解决此问题后,您可能会遇到另一个错误,因为您没有在表单的输入中添加formControlName="name"
.
RC6/RC7/最终版本FIX
要解决此错误,您只需从模块中的@angular/forms
导入ReactiveFormsModule
.这是带有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 { }
为进一步说明,formGroup
是名为FormGroupDirective
的指令的选择器,该指令是ReactiveFormsModule
的一部分,因此需要导入它.它用于将现有的FormGroup
绑定到DOM元素.您可以在 Angular的官方文档页面上了解更多相关信息.. >
THE SITUATION:
Please help! I am trying to make what should be a very simple form in my Angular2 app but no matter what it never works.
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?
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.
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.
这篇关于无法绑定到"formGroup",因为它不是"form"的已知属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!