angular - 模板解析错误：无法绑定到“formGroup”，因为它不是“form”的已知属性。("][formGroup]="loginForm">

Question

我在搞乱角度时遇到了这个错误。我已经尝试研究这个问题，但我遇到的大多数解决方案都是导入 FormsModule、ReactiveFormsModule 但我的不起作用。

Uncaught (in promise): Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("

<ion-content padding>
  <form [ERROR ->][formGroup]="signupForm">
    <ion-item>
      <ion-label position="stacked">Email</ion-label>
"): ng:///SignupPageModule/SignupPage.html@12:8
No provider for ControlContainer

我已经在我的 app.module.ts 中尝试了 FormsModule、ReactiveFormsModule 的导入。它不起作用。

这是我的 app.module.ts 文件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';


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

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],


  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],


  providers: [
    StatusBar,
    SplashScreen,



    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

这是我的 HTML 文件：

<form [formGroup]="loginForm">
  <ion-item>
    <ion-label position="stacked">Email</ion-label>
    <ion-input
      formControlName="email"
      type="email"
      placeholder="Your email address"
      [class.invalid]="!loginForm.controls['email'].valid &&
      loginForm.controls['email'].touched"
    >
    </ion-input>
  </ion-item>
  <ion-item
    class="error-message"
    *ngIf="!loginForm.controls['email'].valid &&
       loginForm.controls['email'].touched"
  >
    <ion-label>Please enter a valid email address.</ion-label>
  </ion-item>

  <ion-item>
    <ion-label position="stacked">Password</ion-label>
    <ion-input
      formControlName="password"
      type="password"
      placeholder="Your password"
      [class.invalid]="!loginForm.controls['password'].valid&& loginForm.controls['password'].touched"
    >
    </ion-input>
  </ion-item>
  <ion-item
    class="error-message"
    *ngIf="!loginForm.controls['password'].valid
      && loginForm.controls['password'].touched"
  >
    <ion-label>Your password needs more than 6 characters.</ion-label>
  </ion-item>

  <ion-button (click)="loginUser(loginForm)" expand="block" [disabled]="!loginForm.valid">
    Log In
  </ion-button>
</form>

<ion-button expand="block" fill="clear" routerLink="/signup">
  Create a new account
</ion-button>

<ion-button expand="block" fill="clear" routerLink="/reset-password">
  I forgot my password 
</ion-button>

标签： angularformsionic-framework