Bind object to input field in Ionic 2

Question

I am stuck with a rather basic question but don't know how to google it.

In my Ionic 2 app I have a AddPassengerPage with inout fields for name, email and phone. In my module I declare those variables:

name: string;
phone: string;
email: string;

So in my view I can bind the input field to it:

<ion-input type="text" [(ngModel)]="email"></ion-input>

Later I want to pass the passenger to a provider which sends it to my API. What I would like to do is simply not have three variables but instead on passenger object, so my code would look like this:

passenger: object;

And in my view:

<ion-input type="text" [(ngModel)]="passenger.email"></ion-input>

This is phantom code the way I wish it was. How would this look in real code?

Answer 1

I would suggest using an interface like so

// This can be placed before 'export class AddPassengerPage' 
// and after your import statements
interface Passenger {
  name: string;
  phone: string;
  email: string;
}

// passenger can then be type checked against the defined interface of Passenger
passenger: Passenger;

Which will allow you to access the properties of the object using the dot notation.

<ion-input type="text" [(ngModel)]="passenger.email"></ion-input>

Another option is to access the properties of a generic object using the square bracket operators.

<ion-input type="text" [(ngModel)]="passenger['email']"></ion-input>