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

I am trying to make a simple register form in ionic 6.12.3 ionic -V and angular Angular CLI version (11.0.5) here is my Repository: Repo

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';

  selector: 'app-register',
  templateUrl: './',
  styleUrls: ['./'],
export class RegisterPage implements OnInit {

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

  ngOnInit() {
    this.credentials ={
      first_name: ['First Name', [Validators.required]],
      last_name: ['Last Name', [Validators.required]],
      email: ['', [Validators.required,]],
      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

  <form (ngSubmit)="register()" [formGroup]="credentials">
      <div class="input-group">

          <ion-input placeholder="First Name" formControlName="first_name"></ion-input>
        <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>

          <ion-input placeholder="Last Name" formControlName="last_name"></ion-input>
        <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>

          <ion-input type="email" placeholder="Email" formControlName="email"></ion-input>
        <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>

          <ion-input type="password" placeholder="Password" formControlName="password"></ion-input>
        <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>

          <ion-input type="password" placeholder="Password" formControlName="password_confirmation"></ion-input>
        <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>
      <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()">

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';

  declarations: [AppComponent],
  entryComponents: [],
  imports: [
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  bootstrap: [AppComponent]
export class AppModule {

    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
    ) {

  initializeApp() {
    this.platform.ready().then(() => {


So I have imported import { ReactiveFormsModule, FormsModule } from '@angular/forms'; is app module and I declared FormCroup Credentials in and used it in the 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.

Thank you :)

Read more here:

Content Attribution

This content was originally published by Moon Moon at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: