Typescript Ionic 6 FormBuilder、FormGroup、验证器、FormControl和ControlContainer错误

我试图在ionic 6.12.3

ionic-V

和angular

angular CLI版本（11.0.5）

和

npm 6.14.11

中创建一个简单的注册表，存储库：

这是我的

注册表.page.ts

：

import { AuthenticationService } from './../../services/authentication.service';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl, ControlContainer } from '@angular/forms';
import { AlertController, LoadingController } from '@ionic/angular';
import { Router } from '@angular/router';

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

  credentials: FormGroup;
 
  constructor(
    private fb: FormBuilder,
    private authService: AuthenticationService,
    private alertController: AlertController,
    private router: Router,
    private loadingController: LoadingController
  ) {}

  ngOnInit() {
    this.credentials = this.fb.group({
      first_name: ['First Name', [Validators.required]],
      last_name: ['Last Name', [Validators.required]],
      email: ['eve.holt@reqres.in', [Validators.required, Validators.email]],
      password: ['cityslicka', [Validators.required, Validators.minLength(6)]],
      password_confirmation: ['cityslicka', [Validators.required, Validators.minLength(6)]],
    });
  }

  async register() {

  }

  login() {
    this.router.navigateByUrl('/login', { replaceUrl: true });
  }

}

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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';

import { Platform } from '@ionic/angular';

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

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
      BrowserModule, 
      IonicModule.forRoot(), 
      AppRoutingModule,
      HttpClientModule,
    ReactiveFormsModule,
    FormsModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
    ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

}

这是我的

register.page.html

：

<ion-content>
  <h1>Register</h1>
  
  <form (ngSubmit)="register()" [formGroup]="credentials">
      <div class="input-group">

        <ion-item>
          <ion-input placeholder="First Name" formControlName="first_name"></ion-input>
        </ion-item>
        <div *ngIf="(first_name.dirty || first_name.touched) && first_name.errors" class="errors">
          <span *ngIf="first_name.errors?.required">First Name is required</span>
          <span *ngIf="first_name.errors?.email">First Name is invalid</span>
        </div>

        <ion-item>
          <ion-input placeholder="Last Name" formControlName="last_name"></ion-input>
        </ion-item>
        <div *ngIf="(last_name.dirty || last_name.touched) && last_name.errors" class="errors">
          <span *ngIf="last_name.errors?.required">Last Name is required</span>
          <span *ngIf="last_name.errors?.email">Last Name is invalid</span>
        </div>

        <ion-item>
          <ion-input type="email" placeholder="Email" formControlName="email"></ion-input>
        </ion-item>
        <div *ngIf="(email.dirty || email.touched) && email.errors" class="errors">
          <span *ngIf="email.errors?.required">Email is required</span>
          <span *ngIf="email.errors?.email">Email is invalid</span>
        </div>

        <ion-item>
          <ion-input type="password" placeholder="Password" formControlName="password"></ion-input>
        </ion-item>
        <div *ngIf="(password.dirty || password.touched) && password.errors" class="errors">
          <span *ngIf="password.errors?.required">Password is required</span>
          <span *ngIf="password.errors?.minlength">Password needs to be 6 characters</span>
        </div>

        <ion-item>
          <ion-input type="password" placeholder="Password" formControlName="password_confirmation"></ion-input>
        </ion-item>
        <div *ngIf="(password_confirmation.dirty || password_confirmation.touched) && password_confirmation.errors" class="errors">
          <span *ngIf="password_confirmation.errors?.required">Password Confirmation is required</span>
          <span *ngIf="password_confirmation.errors?.minlength">Password Confirmation needs to be 6 characters</span>
        </div>
      </div>
   
      <ion-button type="submit" expand="block" [disabled]="!credentials.valid">Sign Up</ion-button>
      <ion-button type="button" expand="block" color="light" fill="clear" (click)="login()">
        Login
      </ion-button>
  </form>
</ion-content>

所以我从'@angular/forms'导入了

import{ReactiveFormsModule，FormsModule}

是应用程序模块，我在

register.page.ts

中声明了FormCroup凭据，并在HTML

register.page.HTML

中使用了它，但我似乎无法理解为什么会出现此错误：

ERROR Error: Uncaught (in promise): Error: NodeInjector: NOT_FOUND [ControlContainer]
Error: NodeInjector: NOT_FOUND [ControlContainer]
    at getOrCreateInjectable (core.js:3935)
    at Module.ɵɵdirectiveInject (core.js:13753)
    at NodeInjectorFactory.NgControlStatusGroup_Factory [as factory] (forms.js:706)
    at getNodeInjectable (core.js:4029)
    at instantiateAllDirectives (core.js:7964)
    at createDirectivesInstances (core.js:7330)
    at ɵɵelementStart (core.js:13902)
    at RegisterPage_Template (template.html:4)
    at executeTemplate (core.js:7303)
    at renderView (core.js:7112)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27425)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)

我看到了很多问题，我不知道哪里出了问题，甚至在app.module.ts中导入

ReactiveFormsModule

之前，登录页面似乎工作正常

PS：我是离子型的新手这是我第三天使用angular或ionic，它们看起来是一样的

检查存储库：

---

谢谢：）

在爱奥尼亚，您在

YourPage.module.ts中导入了一些东西

尝试将其导入您所在的任何页面：

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

@NgModule({    
imports: [
        ...
        ReactiveFormsModule,
        FormsModule,

您需要在使用表单模块的组件所在的模块中导入表单模块。据我所见，您没有在
AppModule
中声明
RegisterPageComponent
。解决这个问题应该可以解决你的问题！RegisterPageComponent不是角度上的组件，在ionic中，它只是称为页面，不需要声明。我们只在
app routing.module.ts
中添加了它的路由，因此声明了注意，我的登录页面工作得很好相同的代码，唯一的区别在于形式。在爱奥尼亚，你也必须在
Page.module.ts
中导入它，就像你在
app.module.ts
@NajamUsSaqib中一样，我认为我们在爱奥尼亚6中不需要它，因为这已经在
app routing.module.ts中处理好了。如果我们删除
凭证的声明：FormGroup
在
register.page.ts中
和
[formGroup]=“凭证”
从html中清空
ngOnInit（）
在
register.page.ts中
我能够正常获取页面。因此，
表单组中唯一的问题是
。