無法綁定到'formGroup'，因為它不是'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 { }問題：為什么我會收到這個錯誤？我錯過了什么嗎？
3 回答
慕少森
TA貢獻2019條經驗 獲得超9個贊
RC5 FIX
你需要import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'在你的控制器，并把它添加到directives的@Component。這將解決問題。
修復之后，您可能會收到另一個錯誤，因為您沒有formControlName="name"在表單中添加輸入。
RC6 / RC7 /最終版本FIX
要修復此錯誤，您只需ReactiveFormsModule從@angular/forms模塊中導入即可。以下是ReactiveFormsModule導入基本模塊的示例：
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的官方文檔頁面上閱讀更多相關信息。
素胚勾勒不出你
TA貢獻1827條經驗 獲得超9個贊
Angular 4與功能模塊（例如，如果您使用共享模塊）一起要求您也導出ReactiveFormsModule工作。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
ReactiveFormsModule
],
declarations: [],
exports: [
CommonModule,
FormsModule,
ReactiveFormsModule
]
})
export class SharedModule { }
- 3 回答
- 0 關注
- 1112 瀏覽
添加回答
舉報
0/150
提交
取消