Polymer 1.0 Handling dynamically created Paper Input

Question

I have a Paper-card.

In which using add button, I can dynamically Add 2 paper-input with check and remove button.

When I click on remove icon the the input button in that row is removed.

How can I fetch the data entered in the two paper-input when I click on check icon?

Note** Remember it is a dynamically created input boxes.

For adding and removing the input boxes, I have created an array with notify:true and each remove removes an index and each add adds an index to the array.

Help me on this.

Code to Add input Boxes:

 addFood:function(){ var tempArr=this.foodArray.slice(); var med= new Object(); med.name=""; med.unit=""; tempArr.push(med); this.foodArray=tempArr; }, 

 <paper-card heading= "Food Details"> <div class="card-content"> <template is="dom-repeat" items="{{foodArray}}" as="food"> <div class="horizontal layout"> <paper-input value="[[food.name]]"></paper-input> <paper-input value="{{food.unit}}"></paper-input> <paper-icon-button icon="icons:done" on-click="saveFood"></paper-icon-button> <paper-icon-button icon="icons:delete" on-click="deleteFood"></paper-icon-button> </div> </template> /div> <div class="card-actions"> <div class="horizontal layout" > <paper-button on-click="addFood">Add</paper-button> </div> </div> </paper-card> 

Answer 1

This can be done by generating a unique id for each element that you need to lookup in order to pull out user input values.

Inside your dom-repeat template you should set the id the elements. Use a generated id based on the element type, eg:

  <paper-icon-button id="{{_doneId(item.index)}}" on-click="done">

Then in your on-click handler you can get the id of the target, pull out the item.index, generate an id of the generated paper-input element, lookup that element, and then read the value.

You'll need to add an "index" field to you data model. A simple integer index value is fine. The _doneId function is simply:

  _doneId: function(index) {
     return "_doneId" + index; 
  }

You'll need to pull the index value out of in the click handler and lookup the other element, eg, something like this:

 done: function(e) {
    var id = e.target.getAttribute("id");
    var index = id.substr(7); // length of "_doneId" prefix
    var inputElem = this.$$("#" + this._inputId(index));
    // then access the inputElem value field, whatever that is
    console.log("the selected input value is: " + inputElem.value);
  }

Answer 2

I believe what you are looking to do is to, when delete is clicked, remove the correct item from the list. This is done by using the model within the event for when the button is clicked. This is a result of the event handler being within the template-repeat. Explained here . The HTML remains the same. In addition to the remove solution, I have simplified the add solution for you so that it uses the polymer push methods for proper element notifications:

Script for your custom element:

 addFood:function(){
    this.push('foodArray',{name:"",unit:""});
 },
 deleteFood:function(e){
    this.splice('foodArray',e.model.index,1);
 },
 saveFood:function(e) {
    // Save food from array with index: e.model.index
    // Data is accessible via this.foodArray[index], or just the current row: e.model.food.*
 },

A working sample is here.

Answer 3

One way could be if data entered is included as custom attributes to done button.

(you'll need to slightly reorganize the input array and place each object in it's own unique id)

<paper-icon-button
            id='some_unique_id'
            icon="icons:done" 
            on-click="saveFood"
            name="{{food.name}}"
            unit="{{food.unit}}">
</paper-icon-button>

Then take the custom attributes values:

saveFood: function(e, detail, source) {

         var name = source.getAttribute('name');
         //use 'name' here
 }

....

Other way solve this is to consider that Polymer's data binding is dynamic .

You say "For adding and removing the input boxes, I have created an array...", well in the same array data will be updated as you change it in the forms, as:

"med":[
    {"id_1":{"name":"Potato", "unit":"2kg"}}, 
    ...
  ]

Next "saveFood" callback needs to search the 'Potato' object in the 'med' array. For more accurate search you can use some id to mark each object, and then do search by that id.