angular - 无法绑定(bind)到 'formGroup'，因为它不是 'form' 的已知属性。 ionic v5.2.2 中的错误

Question

我有以下 ionic 组件，其中包括一个表单，但每次我访问该页面时，Web 控制台都会返回以下错误。

ERROR Error: 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)]="passengregForm">

    <ion-item>
"): ng:///RegisterPageModule/RegisterPage.html@10:7
No provider for ControlContainer ("

<ion-content padding>
 [ERROR ->]<form [(formGroup)]="passengregForm">

    <ion-item>
"): ng:///RegisterPageModule/RegisterPage.html@10:1
No provider for NgControl ("
    <ion-item>
      <ion-label position="floating">Full Name</ion-label>
      [ERROR ->]<ion-input type="text" formControlName="fullname"></ion-input>
    </ion-item>
    <ion-button expand"): ng:///RegisterPageModule/RegisterPage.html@14:6

和register.module.ts，

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {

  driverregForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.driverregForm = this.formBuilder.group({
      fullname: ['', Validators.required],
      nic: ['', Validators.required]
    });
  }

  onSubmit() {
    console.log('alert !');
  }

}

和register.page.html，

<ion-content padding>
 <form [(formGroup)]="passengregForm">

    <ion-item>
      <ion-label position="floating">Full Name</ion-label>
      <ion-input type="text" formControlName="fullname"></ion-input>
    </ion-item>
    <ion-button expand="full" type="submit" [disabled]="!credentialsForm.valid">Login</ion-button>

  </form> 
</ion-content>

在运行应用程序的命令提示符上找不到任何错误，我已经完成了 this但这并没有解决问题。

app.module.ts 文件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy, RouterModule, Routes } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


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 { Geolocation } from '@ionic-native/geolocation/ngx';
import { NativeGeocoder } from '@ionic-native/native-geocoder/ngx';

import { SQLitePorter } from '@ionic-native/sqlite-porter/ngx';
import { SQLite } from '@ionic-native/sqlite/ngx';

import { HttpClientModule } from '@angular/common/http';
import { JwtModule, JWT_OPTIONS } from '@auth0/angular-jwt';
import { Storage, IonicStorageModule } from '@ionic/storage';

import { Camera } from '@ionic-native/Camera/ngx';
import { File } from '@ionic-native/File/ngx';
import { WebView } from '@ionic-native/ionic-webview/ngx';
import { FilePath } from '@ionic-native/file-path/ngx';

import { RegisterPageModule } from './public/register/register.module';

export function jwtOptionFactory(storage) {
  return {
    tokenGetter: () => {
      return storage.get('access_token');
    },
    whitelistedDomains: ['localhost:5000']
  }
}


@NgModule({
  declarations: [AppComponent,RegisterPageModule],
  entryComponents: [],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    IonicStorageModule.forRoot(),
    JwtModule.forRoot({
      jwtOptionsProvider: {
        provide: JWT_OPTIONS,
        useFactory: jwtOptionFactory,
        deps: [Storage],
      }
    })
   ],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    NativeGeocoder,
    { provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy
    },
    SQLite,
    SQLitePorter,
    Camera,
    File,
    WebView,
    FilePath
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

ionic 版本是 5.2.2

提前致谢。

Answer 1

看来您需要使用正确的FormGroup。您的组件中没有 passengregForm，但有一个 driverregForm。尝试做一个

[formGroup]="driverregForm" 改为(同时删除括号)