Question

我有以下包含表单的离子组件，但是每次访问页面时，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 version is 5.2.2

谢谢。

Answer 1

您似乎需要使用正确的FormGroup。您的组件中没有passengregForm，但是您有driverregForm。尝试做

[formGroup]="driverregForm"（也请删除括号）

Answer 2

尝试声明如下：

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]="!passengregForm.valid">Login</ion-button>

  </form> 
</ion-content>

您的ts文件

import { Component, OnInit, Input } 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 {

 @Input() passengregForm: FormGroup;
  constructor(private formBuilder: FormBuilder) { }

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

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

}

Answer 3

您需要在app.module.ts

中导入 ReactiveFormsModule

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

@NgModule({
    imports: [
        FormsModule,
        ReactiveFormsModule,
        ...
    ],
    declarations: [
        ...
    ],
    bootstrap: [AppComponent]
})

Answer 4

@Adrita指出，您需要将FormsModule和ReactiveFormsModule导入 app.module.ts

如果这不起作用，可能是因为您的模块是延迟加载的。在这种情况下，将其导入到延迟加载的模块中。您的情况是register.module.ts

还有一件事是 [formGroup] 而不是 [（formGroup）]

无法绑定到“ formGroup”，因为它不是“ form”的已知属性。离子v5.2.2中的错误

4 个答案: