Ionic 7 / Angular 15: NG01000 Errror

Issue

Please note that I have researched this error at several place but unable to fix it. That is why posting here.

I am seeing the following error for a form. I have tried several things such as setTimeout, ChangeDetector and AfterInit but nothing is solving this issue. Below is my code:

ERROR Error: NG01000: There are no form controls registered with this group yet. If you're using ngModel, you may want to check next tick (e.g. use setTimeout).

if (this.postData.token) {
        this.detailService.getDetails(this.postData).subscribe(
        (res: any) => {

                let userid = this.authUser.user_id;

                this.form.setValue({
                firstname: res[0].firstname,
                lastname: res[0].lastname,
                email: res[0].email,
                phone: res[0].phone,
                relationship: res[0].relationship,
                userid: userid
                });

          return this.detail = res;
        },
        (error: any) => {
          this.toastService.presentToast('Something went wrong. Please try again.');
        }
      );
    }

Below is my HTML code

<form #myForm="ngForm">
<ion-item  lines="none" class="ion-margin itemDesign">
  <ion-icon
          name="person-outline" slot="end" color="medium">
        </ion-icon>
  <ion-input label="First Name" autocomplete="off" name="firstname" type="text" ngModel required></ion-input>
  </ion-item>

<ion-item  lines="none" class="ion-margin itemDesign">
  <ion-icon
          name="person-outline" slot="end" color="medium">
        </ion-icon>
  <ion-input label="Last Name" autocomplete="off" type="text" name="lastname" ngModel required></ion-input>
  </ion-item>

<ion-item  lines="none" class="ion-margin itemDesign">
  <ion-icon
          name="mail-outline" slot="end" color="medium">
        </ion-icon>
  <ion-input label="Email" autocomplete="off"  type="email" name="email" ngModel required></ion-input>
  </ion-item>

<ion-item  lines="none" class="ion-margin itemDesign">
  <ion-icon
          name="phone-portrait-outline" slot="end" color="medium">
        </ion-icon>
  <ion-input label="Phone" autocomplete="off"   name="phone" type="tel" ngModel></ion-input>
  </ion-item>

<ion-item  lines="none" class="ion-margin itemDesign">
  <ion-icon
          name="people-outline" slot="end" color="medium">
        </ion-icon>
  <ion-input label="Relationship" autocomplete="off" type="text" name="relationship" ngModel></ion-input>
  </ion-item>
  <ion-input type="hidden" autocomplete="off" name="userid" ngModel></ion-input>
 

I have also tried the form tag as:

<form #myForm="ngForm" (ngSubmit)="confirm(myForm.value)">

Code with ngAfterViewInit that was originally in ngOnInit.

 ngAfterViewInit(){
   this.auth.userData$.subscribe((res: any) => {
         this.authUser = res;
         let user_id = this.authUser.user_id;
         this.getDetail();
   });
  }

Addition information:  instead of using routerLink to redirect back to the list page, I am using the following code.  The reason behind this is because my list was not updating after creating a new item or updating an existing item.  My routing through refresh, it shows an updated list.  With routerLink this error doesn't show.

 redirect() {
    setTimeout(() => {
    this.router.navigateByUrl('refresh', { skipLocationChange: true }).then(() => {
        setTimeout(() => {
                this.router.navigate(['home/settings/detaillist']);
         }, 0);
    });
   }, 0);
  }

Solution

ERROR Error: NG01000: There are no form controls registered with this group yet. If you're using ngModel, you may want to check next tick (e.g. use setTimeout).

You have declared a form on the html:

<form #myForm="ngForm">

But where is this being declared in the ts file? No where from what you shown. This needs to be declared and initialized. The docs show example on how to properly do this: https://angular.dev/guide/forms/reactive-forms#overview-of-reactive-forms

Answered By - StackoverBlows