Can't bind to 'formGroup' since it isn't a known property of 'form'

Posted 2021-01-30 hibiscus-ben

在APP.module.ts中引入FormsModule, ReactiveFormsModule。

 1 import { BrowserModule } from ‘@angular/platform-browser‘;
 2 import { NgModule } from ‘@angular/core‘;
 3 import { FormsModule, ReactiveFormsModule } from ‘@angular/forms‘;
 4 
 5 import { AppComponent } from ‘./app.component‘;
 6 import { CoreModule } from ‘./core/core.module‘;
 7 import { LoginModule } from ‘./login/login.module‘;
 8 import { AppRoutingModule } from ‘./app.route.module‘;
 9 
10 @NgModule({
11   declarations: [
12     AppComponent
13   ],
14   imports: [
15     BrowserModule,
16     CoreModule,
17     FormsModule,
18     ReactiveFormsModule,
19     LoginModule,
20     AppRoutingModule
21   ],
22   providers: [],
23   bootstrap: [AppComponent]
24 })
25 export class AppModule { }

特别注意：在html中一定不能用form，随便换一个单词myGroup就行。

[formGroup]="myGroup"

 1 <div class="login-wrap">
 2   <form [formGroup]="myGroup" (ngSubmit)="onSubmit(myGroup,$event)">
 3     <mat-card class="example-card">
 4       <mat-card-header><mat-card-title>登录</mat-card-title></mat-card-header>
 5       <mat-card-content>
 6         <mat-form-field>
 7           <input matInput placeholder="您的email" formControlName="email">
 8         </mat-form-field>
 9         <mat-form-field>
10           <input matInput placeholder="您的密码" formControlName="password">
11         </mat-form-field>
12       </mat-card-content>
13       <mat-card-actions>
14         <button mat-raised-button type="submit">登录</button>
15       </mat-card-actions>
16       <mat-card-footer>
17         <p>还没有账户？<a href="#">注册</a></p>
18         <p>忘记密码？<a href="#">找回</a></p>
19       </mat-card-footer>
20     </mat-card>
21   </form>
22   <mat-card class="example-card">
23     <mat-card-header>
24       <mat-card-title>每日佳句</mat-card-title>
25       <mat-card-subtitle>满足感是在于不断努力，而不是现有成就。全新努力就会胜利满满。</mat-card-subtitle>
26     </mat-card-header>
27     <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
28     <mat-card-content>
29       <p>
30         The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
31         A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
32         bred for hunting.
33       </p>
34     </mat-card-content>
35   </mat-card>
36 </div>