状況
Angular アプリケーションで非常にシンプルなフォームを作成しようとしていますが、どうやってもうまくいきません。
Angularバージョン
アングル 2.0.0 RC5
エラー
'form' の既知のプロパティではないため、'formGroup' にバインドできません
コード
景色
<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 { }
質問
なぜこのエラーが発生するのでしょうか? 何か見落としているのでしょうか?
ベストアンサー1
RC6/RC7/最終リリースの修正
このエラーを修正するには、モジュール内でReactiveFormsModule
importするだけです。importを使用した基本モジュールの例を次に示します。@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
ディレクティブのセレクターなので、インポートする必要があります。これは、既存の をDOM 要素にバインドするために使用されます。詳細については、FormGroupDirective
ReactiveFormsModule
FormGroup
Angularの公式ドキュメントページ。
RC5 修正
import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'
コントローラーで を に追加するdirectives
必要があります@Component
。これで問題は解決します。
formControlName="name"
これを修正した後、フォームに入力を追加しなかったため、別のエラーが発生する可能性があります。