在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>
Can't bind to 'formGroup' since it isn't a known property of 'form'
原文地址:https://www.cnblogs.com/hibiscus-ben/p/10184289.html
时间: 2024-10-11 09:41:21