Ionic 6 FormBuilder, FormGroup, Validators, FormControl and ControlContainer Error

Question

I am trying to make a simple register form in ionic 6.12.3 ionic -V and angular Angular CLI version (11.0.5) and npm 6.14.11, Repository: Repo.

Here is my register.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 });
  }

}

And here is my 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>

Also here is 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 { 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();
    });
  }

}

So I have imported import { ReactiveFormsModule, FormsModule } from '@angular/forms'; is app module and I declared FormCroup Credentials in register.page.ts and used it in the HTML register.page.html, BUT I cant seem to understand why I am having this error:

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)

I have seen many questions I don't know what is wrong, and the login page seems to work fine even before importing ReactiveFormsModule in app.module.ts

PS: I am new to ionic this is my 3rd day using angular or ionic they seem to be the same.

Check Repository: Repo

Thank you :)

Answer 1

in IONIC sometime somethings have you imported in YourPage.module.ts

try importing it in your whatever page you are on:

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

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