get input value of *ngFor generated input in ionic 2

Question

I am trying to build an input interface, where the user can click a button to add an input field in Ionic. Because the inputs are generated dynamicly via *ngFor, I have problems binding them with ng-Model. I can give every input a unique id, but cannot grab the value of this field.

See my HTML:

  <ion-list>
  <ion-item>
    <ion-label>Name</ion-label>
    <ion-input name="name"></ion-input>
  </ion-item>
<ion-item-sliding *ngFor="let attribute of attributes; let i = index;">
  <ion-item>
    <ion-input type="text" placeholder="Attribute {{i + 1}}"></ion-input>
    <ion-select placeholder="Type" interface="popover">
      <ion-option value="0" selected="true">Checkbox</ion-option>
      <ion-option value="1">Text</ion-option>
    </ion-select>
  </ion-item>
  <ion-item-options>
    <button ion-button color="danger" (click)="deleteItem(i)">Delete</button>
  </ion-item-options>
  </ion-item-sliding>
  <button ion-button icon-only style="float: right" (click)="onClickAddAttribute()">
    <ion-icon name="add"></ion-icon>
  </button>
</ion-list>

and my ts :

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@IonicPage()
@Component({
  selector: 'page-new-stack',
  templateUrl: 'new-stack.html',
})
export class NewStackPage {
  attributes = [0];
  name = "";
  constructor(public navCtrl: NavController, public navParams: NavParams,
              public storage: Storage, public alertCtrl: AlertController) {
  }

  onClickAddAttribute(){
      this.attributes.push(this.attributes.length);
  }

  deleteItem(i){
    this.attributes.splice(i, 1);
  }
}

I do not need the input values instantly, but after a click on a button

Thank you in advance and excuse my english

EDIT:

i tried adding

id="attr[i]"

with

`getAttributes(){ 
    let attrArr = [] 
    for (let i = 0; i < this.attributes.length; i++) { 
      attrArr.push(document.getElementById("attr"+[i])); 
    } 
    console.log(attrArr); 
  }`

and

[(ngModel)]="attr{{i}}" name="attr{{i}}" in combination with this.attr[i] , which doesn't work at all

Can you post the code where you try to get the input values? — Kevin, Aug 10 '17 at 13:29

score 3 · Accepted Answer · answered Aug 10 '17 at 14:40

You can keep two arrays in sync. One that you iterate in the *ngFor, and one that stores the input values. Using one array for the *ngFor and then using its elements in the [(ngModel)], will make the *ngFor run each time you enter a character in an input, wich will cause the input to loose focus after entering a character.

HTML:

<ion-content>

    <button ion-button (click)="addInput()">Add Input</button>
    <ion-item *ngFor="let item of attributes; let i = index">
        <ion-label>Input #{{ i + 1 }}</ion-label>
        <ion-input [(ngModel)]="values[i]" (input)="valChange($event.target.value, i)" type="text"></ion-input>
        <button item-right ion-button icon-only (click)="removeInput(i)">
            <ion-icon name="close"></ion-icon>
        </button>
    </ion-item>

    <button ion-button (click)="getValues()">Get values</button>

</ion-content>

TS:

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
    selector: 'some-page',
    templateUrl: 'some-page.html'
})
export class SomePage {
    attributes:Array<number> = [];
    values:Array<string> = [];

    constructor() { }    

    valChange(value:string, index:number):void{
        this.values[index] = value;
    }

    addInput():void{
        this.attributes.push(this.attributes.length);
        this.values.push('');
    }

    removeInput(index:number):void{
        this.attributes.splice(index, 1);
        this.values.splice(index, 1);
    }

    getValues():void{
        console.log(this.values);
    }
}

There's a better option than maintaining two arrays, use trackBy, to avoid losing input focus: https://stackoverflow.com/a/42329031/1956540 — BatteryAcid, Apr 25 '19 at 16:30

get input value of *ngFor generated input in ionic 2

1 Answers1