Ionic Standalone Component - FormControlName

Question

I have a form, reflected with some Ionic components:

<form [formGroup]="loginForm" (ngSubmit)="loginForm.valid && login(loginForm.controls['email'].value, loginForm.controls['password'].value)" novalidate>
    <ion-item>
        <ion-input formControlName="email"></ion-input>
    </ion-item>
    <ion-item>
        <ion-input type="password" formControlName="password"></ion-input>
    </ion-item>
    <ion-button [disabled]="!loginForm.valid" expand="block" type="submit">
        Login
    </ion-button>
</form>

And in the TypeScript:

import { IonTabBar, IonTabButton, IonTabs, IonTitle, /*Others*/ } from "@ionic/angular/standalone"

  loginForm: FormGroup;

  constructor(private fb: FormBuilder, private loginService: LoginFireauthService) {
    addIcons({ keyOutline, logInOutline, personAddOutline, refreshCircleOutline, logoGoogle });
    this.loginForm = this.fb.group({
      email: ['', Validators.compose([Validators.required, Validators.email])],
      password: ['', Validators.compose([Validators.required, Validators.minLength(8)])],
    });
  }

I have the error:

No value accessor for form control name: 'email'

I cannot import IonicModule from @ionic/angular since it will have double identifier for the ionic components.

I have no idea how to have the form control name on the Ionic standalone components.

Here is a StackBlitz where you can see the issue: https://stackblitz.com/~/github.com/Fx73/IonicTabBarTest

Answer 1

From your GitHub StackBlitz link, you are not importing the IonInput to the HomePage component.

Make sure you have import it.

import { ..., IonInput } from "@ionic/angular/standalone";

@Component({
  ...,
  imports: [..., IonInput],
})
export class HomePage {
  ...
}

Demo @ StackBlitz