How do i store multiple inputs in an array with ionic2/angular2

Question

I have a dynamic list of user inputs. The user is able to add a destination by clicking "Add Destination" which generates an input field. Once the field is generated, the user enters the destination and clicks a button that should store all of the destinations in an Array. The user should be able to add multiple destinations.

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <form>
    <ion-list>
  <ion-item>
    <ion-label fixed>Starting</ion-label>
    <ion-input type="text" ></ion-input>
  </ion-item>

  <ion-item *ngFor="let destination of destinations" >
    <ion-label fixed>Destination</ion-label>
    <ion-input type="text" ></ion-input>
  </ion-item>
  </ion-list>


  <button  ion-button color="light" icon-right (click)="addDestination()" >
      Add Destination
      <ion-icon name="add" ></ion-icon>
  </button>
  <div style="padding-bottom: 10px; position: absolute; bottom: 0px; width: 92%">
    <button ion-button block (click)="store()">Find Path</button>
  </div>
  </form>
</ion-content>

Typescript:

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

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public destinations = [];

  constructor(public navCtrl: NavController) {

  }





  addDestination(){
    this.destinations.push(1);
    console.log(this.destinations);
    console.log('hello');
  }

  store(){
    console.log('hello');
    console.log(this.destinations);
  }

}

ngModel will be = destinations[$index]. So each input has holds a value of the array — yBrodsky
– yBrodsky, Commented Mar 16, 2017 at 17:37

yBrodsky · Accepted Answer · 2017-03-16 18:08:46Z

1

What I meant in my comment:

<div *ngFor="let destination of destinations; let i = index">
  <input type="text" [(ngModel)]="destinations[i]"/>
</div>

https://plnkr.co/edit/mZi1UYI9drNFRwVQsJs5?p=preview

answered Mar 16, 2017 at 18:08

yBrodsky

5,0614 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dansmith12 Over a year ago

This has partly worked mate thanks! But the problem now is that whenever I add a destination, all of the input fields are cleared of any input. Is there a way to save the inputs to the fields?

yBrodsky Over a year ago

I don't understand what you mean. Works for me: plnkr.co/edit/ZzU3StsH7p4QNKvtPGTQ?p=preview

Dansmith12 Over a year ago

With your solution if you add input in one of the boxes it fills other boxes.

yBrodsky Over a year ago

Check this: plnkr.co/edit/GVP5GZfXTQinoV683ssA?p=preview || I replaced your array of strings with an array of objects. Works better in my opinion.

Dansmith12 Over a year ago

can you add a viewletters() function that console.logs all the objects in the destinations array

|

Collectives™ on Stack Overflow

How do i store multiple inputs in an array with ionic2/angular2

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related