I am having issue with retrieving value from the forms, its always showing null value. I never had this issue with ngModule since i am planning to convert the app into a standalone mode.

My current ionic version is 7.2.

login.page.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule, NgForm } from '@angular/forms';



@Component({
  selector: 'app-login',
  templateUrl: 'login.page.html',
  styleUrls: ['login.page.scss'],
  standalone:true,
  imports:[CommonModule,FormsModule,IonicModule,]
})

export class LoginPage {
    
    loginDetails = {
        username:'',
        password:''
    }; 

    constructor(){

    }

    ngOnInit(){

    }

    async onSubmit(form:ngForm){
        if(form.valid){
            console.log(loginDetail) // value which comes under this line username:'',password:''
        }else{
            console.log('form is invalid')
        }
    }

}

login.page.html

<ion-content>

<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
    <ion-item>
        <ion-label position="floating">
            <ion-icon name="person"></ion-icon>  Username</ion-label>
        <ion-input type="text" name="username" [(ngModel)]="loginDetails.username" required></ion-input>
    </ion-item>
    <div class="spacer" style="height:5px"></div>
    <ion-item>
        <ion-label position="floating">
            <ion-icon name="lock-closed"></ion-icon>  Password</ion-label>
        <ion-input type="password" name="password" [(ngModel)]="loginDetails.password" required></ion-input>
    </ion-item>
    <ion-button expand="block" type="submit">
        Login
    </ion-button>
</form>

</ion-content>

can anyone help me resolve this issue, thanks in advance.

I tried every other form methods and still receiving null value when we click on the submit.