Ionic 7 / Angular 15：NG01000 错误

Question

请注意，我已经在多个地方研究过此错误，但无法修复它。这就是为什么在这里发帖的原因。

我看到表单出现以下错误。我已经尝试了一些方法，例如 setTimeout、ChangeDetector 和 AfterInit，但没有任何方法可以解决这个问题。下面是我的代码：

错误 错误：NG01000：尚未向该组注册任何表单控件。如果您使用 ngModel，您可能需要检查下一个刻度（例如使用 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.');
        }
      );
    }

下面是我的 HTML 代码

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

我也尝试过表单标签：

<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);
  }

Answer 1

错误 错误：NG01000：尚未向该组注册任何表单控件。如果您使用 ngModel，您可能需要检查下一个刻度（例如使用 setTimeout）。

您已在 html 上声明了一个表单：

<form #myForm="ngForm">

但是这是在 ts 文件中哪里声明的呢？从你所展示的来看，没有任何地方。这需要声明并初始化。文档显示了如何正确执行此操作的示例：https://angular.dev/guide/forms/reactive-forms#overview-of-reactive-forms