Get property undefined error on defined property

Ionic Framework ionic-v3
1

I am having quite a bit of trouble wrapping my head around why this is occurring. I am trying to take user input in a form and submit it to my database, simple enough. The issue I am running into is whenever my app opens up the page it states that the properties of my variables to hold the user input are undefined and I get this error even if I put a predetermined value in there such as “Test” for a string.

Here is my ts where I define the values.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { Alerts } from '../../models/alert';
import { Geolocation } from '@ionic-native/geolocation';
import { RestProvider } from '../../providers/rest/rest';

@IonicPage()
@Component({
  selector: 'page-new-alert',
  templateUrl: 'new-alert.html',
})
export class NewAlertPage {

  public title: string = 'Testing if undefined';
  public severityLevel: string = '';
  public message: string = '';
  public description: string = '';
  public lat: number = 0;
  public long: number = 0;
  public scheduleAt: string = '';
  public updatedAt: string = '';
  public alert: Alerts;


  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams, 
    public geolocation: Geolocation,
    public restProvider: RestProvider,
    private view: ViewController
  ) {
    console.log(this.title);   

  }

  ionViewDidLoad() {
    console.log(this.title);   
  }


  pushAlert() {

    this.alert.title = this.title;
    this.alert.severityLevel = this.severityLevel;
    this.alert.message = this.message;
    this.alert.description = this.description;

    this.alert.scheduleAt = new Date().toISOString();
    this.alert.updatedAt = "";
    this.geolocation.getCurrentPosition().then((resp) => {
     
      this.alert.latitude = resp.coords.latitude;
      this.alert.longitude = resp.coords.longitude;


     }).catch((error) => {
       console.log('Error getting location', error);
     });

     //this.alert.latitude = this.lat;
     //this.alert.longitude = this.long;

     this.restProvider.newAlert(this.alert);

  }

  closeModal() {
    this.view.dismiss();
  }

}

And my HTML code.


<ion-header>

  <ion-navbar>
    <ion-title>newAlert</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-item>
    <ion-label color="primary" stacked>Title</ion-label>
    <ion-input placeholder="Alert Title" [(ngModel)]="alert.title"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Severity Level</ion-label>
    <ion-select [(ngModel)]="alert.severityLevel">
      <ion-option value="1">1</ion-option>
      <ion-option value="2">2</ion-option>
      <ion-option value="3">3</ion-option>
      <ion-option value="4">4</ion-option>
      <ion-option value="5">5</ion-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-label color="primary" stacked>Message</ion-label>
    <ion-input placeholder="Message" [(ngModel)]="alert.message"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" stacked>Description</ion-label>
    <ion-input placeholder="Description" [(ngModel)]="alert.description"></ion-input>
  </ion-item>

  <button ion-button color="primary" (click)="pushAlert()">
    Submit
  </button>
  <button ion-button color="primary" (click)="closeModal()">
    Cancel
  </button>
</ion-content>
2

Found the problem, forgot to switch my ngModel to the variables instead of my alert object.