Angular7報錯:Can't bind to 'formGroup' since it isn't a known property of 'form'

報錯問題：Can't bind to 'formGroup' since it isn't a known property of 'form'

報錯提示：

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/LoginComponent.html@7:6

問題緣由：

沒有導入表單模塊。

解決辦法:

從 @angular/forms 中導入 ReactiveFormsModule 模塊。

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

修改後代碼實例

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">Submit</button>
</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';
// 引入表單模塊
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent,
    DashboardComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    UsersModule,
    // 導入表單模塊
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

參考連接：

https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form

更多內容，請查看項目代碼：

https://github.com/cnwyt/angular-tour-of-heroes

[END]