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
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 {
...
}