Angularエラーメッセージ：「formGroup」は「form」の既知のプロパティではないため、「formGroup」にバインドできません
Angular Error Message
Angularにエラーがあります：「form」の既知のプロパティではないため、「formGroup」にバインドできません
エラーメッセージ：
Uncaught Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. ('</p> <form [ERROR ->][formGroup]='loginForm'> <label> '): ng:///AppModule/root@xxxxx:6 問題の原因：
インポートフォームモジュールなしFormsModule。
解決：
@angular/formsからインポートReactiveFormsModuleモジュール。
import { FormsModule, ReactiveFormsModule } from '@angular/forms' 変更されたコードインスタンス
コンポーネントLoginComponent（login.component.ts）コードは次のように表示されます。
import { Component } from '@angular/core' import { Router } from '@angular/router' import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms' @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent { message: string public userId: number = 0 public storeId: number = 0 constructor( private fb: FormBuilder, public router: Router ) { this.setMessage() } loginForm = this.fb.group({ username: ['', Validators.required], userpass: ['', Validators.required], captcha: [''], }) onLogin() { console.log(this.loginForm) } } ログインテンプレートlogin.component.htmlコード：
<form [formGroup]='loginForm'> <label> account: <input type='text' formControlName='username'> label> <label> password: <input type='text' formControlName='userpass'> label> <button type='button' (click)='onLogin()' [disabled]='!loginForm.valid'>Submitbutton> form> プロジェクトエントリーモジュールapp.module.tsコードは次のように表示されます。
import { BrowserModule } from '@angular/platform-browser' import { NgModule } from '@angular/core' import { AppRoutingModule } from './app-routing.module' import { AppComponent } from './app.component' import { LoginComponent } from './auth/login/login.component' // Introduce the form module import { FormsModule, ReactiveFormsModule } from '@angular/forms' @NgModule({ declarations: [ AppComponent, PageNotFoundComponent, DashboardComponent, LoginComponent ], imports: [ BrowserModule, UsersModule, // Import form module FormsModule, ReactiveFormsModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 参照リンク：
その他のコンテンツについては、プロジェクトコードを確認してください。
https://github.com/cnwyt/angular-tour-of-heroes
[終わり]