[解決済み] formGroup' は 'form' の既知のプロパティではないため、バインドできません。
2022-03-20 09:59:52
質問
状況
Angularアプリケーションで非常にシンプルなフォームを作ろうとしているのですが、何をやってもうまくいきません。
Angularバージョン
Angular 2.0.0 RC5
エラーについて
formGroup' は '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 { }
質問内容
なぜこのようなエラーが発生するのでしょうか?何か見落としているのでしょうか?
解決方法を教えてください。
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の公式ドキュメントページ
.
RC5 FIX
必要なのは
import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'
をコントローラに追加し、それを
directives
で
@Component
. これで問題は解決します。
これを修正した後、おそらく別のエラーが発生するでしょう。
formControlName="name"
をフォームの入力に追加してください。
関連
-
[解決済み】「ルーターリンク」は既知のプロパティではないため、バインドできない
-
Angular CLIでモジュール "angular-devkit/build-angular" が見つからない問題を解決する。
-
[解決済み] ngModel' は 'input' の既知のプロパティではないため、バインドできません。
-
[解決済み] ExpressionChangedAfterItHasBeenCheckedErrorの説明
-
[解決済み] Angularのエラーです。"Can't bind to 'ngModel' because it isn't a known property of 'input'"."
-
[解決済み] Angular CLI SASSオプション
-
[解決済み] 例外が発生しました。既知のネイティブプロパティではないため、'ngFor'にバインドできない
-
[解決済み】'formControl'は'input'の既知のプロパティではないのでバインドできない - Angular2 Material Autocomplete問題
-
[解決済み】Angularの例外。ngForIn'は既知のネイティブプロパティではないため、バインドできない
-
[解決済み】Angular 2 - innerHTML スタイリング
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angular2エラー。exportAs "が "ngForm "に設定されたディレクティブは存在しません。
-
Angularが報告するインジェクションエラーとその解決方法...$injector:unpr]。
-
[解決済み] インデックスを属性値とするngFor
-
[解決済み] コンポーネントテンプレートで要素を選択するには?
-
[解決済み] 現在のルートを取得する方法
-
[解決済み] Angularのルーティングされたコンポーネントにデータを渡すにはどうしたらいいですか?
-
[解決済み】take(1) vs first()
-
[解決済み] Angular 2:'ngModel'が'input'の既知のプロパティではないため、バインドできない。
-
[解決済み] The Angular Compiler requires TypeScript >=3.1.1 and <3.2.0 but 3.2.1 found insteadでエラーが発生しました。
-
[解決済み] angular-cli server - デフォルトのポートを指定する方法