How do I save a filled value in a textfield to a SQL lite database in Ionic 6/Capacitor?

Issue

On Ionic 6, I'm learning how to create a SQL lite database. I have a use case in which I want the user to enter a value into the distance textfield. The value appears on the next page, and I want to save it to the database.

This is my home file with just one simple textfield.

Home.html

<ion-header [translucent]="true">
  <ion-toolbar class="app-theme-color">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      SQL Lite Tutorial
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  <ion-grid>    
    <ion-row>
      <ion-col>
        <ion-item>
          <ion-label position="floating">Distance</ion-label>
          <ion-input [(ngModel)]="geodata.distance"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>   
    <ion-row>
      <ion-col>
        <ion-button class="app-theme-color" (click)="navigateToResultPage()" expand="full" shape="round">Result
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

The value appears on the next page after the user clicks the button.

Result.html

<ion-header>
  <ion-toolbar class="app-theme-color">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Result</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>    
    <ion-row>
      <ion-col>
        <ion-card>
          <ion-card-content>
             <p [(ngModel)]="faveroute.distance">Distance: {{distance}}</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>   
    <ion-row>
      <ion-col>
         <ion-button class="app-theme-color" (click)="addRouteToFavorite()" expand="full" shape="round">Save to
      favorites</ion-button>
      </ion-col>
    </ion-row>  
    <ion-row>
      <ion-col>
        <ion-button class="app-theme-color" (click)="navigateToHomePage()" expand="full" shape="round">Back</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

This is my method I use to add the value to the database. I use a service called DatabaseService.

result.ts

faveroute: RouteInterface;


 addRouteToFavorite() {
    this.dataBaseService.addFavoriteRoute(this.faveroute['distance'])
      .then(data => {
        this.faveroute = { id: ??, distance: this.distance };
      });
  }

And this is my method from the service.

DatabaseService.ts

  addFavoriteRoute(distance) {
    let data = [distance];
    return this.database.executeSql('INSERT INTO favoriteroutes (distance) VALUES (?)', data).then(data => {
      this.getAllFavoriteRoutes();
    });
  }

In the DatabaseService I declare a interface like this.

export interface RouteInterface {
  id: number,
  distance: number
}

And this is my SQL script I use:

CREATE TABLE IF NOT EXISTS favoriteroutes(id INTEGER PRIMARY KEY AUTOINCREMENT, distance INTEGER);
INSERT or IGNORE INTO favoriteroutes VALUES (1, 56);
INSERT or IGNORE INTO favoriteroutes VALUES (2, 34);
INSERT or IGNORE INTO favoriteroutes VALUES (3, 234);   

The database is operational. In my app, I can see the test data. However, when I try to add a new item from the results page, I receive an error.

Error I get in the android studio console:

ERROR TypeError: Cannot read properties of undefined (reading 'distance')

There are numerous tutorials on the internet for adding it from a textfield. However, in this use case, I want to add the value AFTER the user's input.

How can I add the distance property in my database?

Solution

You cannot use ngModel with p tag. also I don't see how you initialized the faveroute variable, if you are not initializing it right, it'll be undefined thus giving you that error. if the card inside the result page is showing the distance properly, that means you are probably setting the distance variable when you are entering the result page. so I'd suggest you work with that instead. check if this fix works:

inside your Result.html file, replace

<p [(ngModel)]="faveroute.distance">Distance: {{distance}}</p>

with

<p>Distance: {{distance}}</p>

and inside your Result.ts file, replace the function with

addRouteToFavorite() {
    this.dataBaseService.addFavoriteRoute(this.distance)
      .then(data => {
        this.faveroute = { id: ??, distance: this.distance };//<- I don't understand what you are doing with this line
      });
  }

Answered By - AmirAli Saghaei