Ionic Standalone Component - FormControlName

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

Continue reading...