adding ngmodel to ionic app can not show up

Question

here is my html page:

<ion-header>
  <ion-toolbar>
    <ion-title>test</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <form (ngSubmit)="addInfo()"></form>
    <ion-item>
      <ion-label color="primary" floating>الاسم الاول </ion-label>
      <ion-input [(ngModel)]="personal_info.first_name" name="first_name"></ion-input>
    </ion-item>
    <button ion-button type="submit" block>Add Todo</button>
  </form>
</ion-content>

and .ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.page.html',
  styleUrls: ['./test.page.scss'],
})
export class TestPage implements OnInit {
  public personal_info : {};

  constructor() { }

  ngOnInit() {
  }
  addInfo() {
    console.log(this.personal_info)
  }
}

The page works fine if I didn't include ng model, but this code above I got no error& it didn't show up

Answer 1

If you want to use ngModel you have to import FormModule to your module.ts file:

import { FormsModule } from '@angular/forms';

@NgModule({
imports: [
  FormsModule,
],
...