CODEWITHSUNDEEP
javascriptdata-bindingpolymerpolymer-1.0
MSH
MSH

Reputation: 1287

How to bind object's subproperties with paper-input in Polymer

I have an object property (newcontact) and function (saveContact) in one of my Polymer components:

properties: {
  newcontact: {
    type: Object
  }
},
saveContact: function() {
  console.log(this.newcontact); // Getting undefined
},

I want to add subproperties to newcontact via <paper-input> data bindings, as seen in the following code:

<label class="form-control-label">Name</label>
<paper-input type="text" name="name" is="iron-input" value="{{newcontact.name}}"></paper-input>

<label>Email</label>
<paper-input type="text" name="email" is="iron-input" value="{{newcontact.email}}"></paper-input>          

<label>Phone</label>
<paper-input type="text" name="phone" is="iron-input" value="{{newcontact.phone}}"></paper-input>           
<paper-input hidden is="iron-input" value="{{newcontact.id}}"></paper-input>
<input type="button" value="Save" on-click="saveContact" class="btn btn-primary">

But saveContact() always logs undefined for this.newcontact. Why is that?

Upvotes: 2

Views: 393

Answers (1)

Maria
Maria

Reputation: 5604

You are setting properties of your newcontact object with the input fields. However, that object has never been initialised. You can do that in your properties definition by giving it a value.

properties:{
    newcontact:{
        type: Object,
        value: function() {
            return {};
        }
    }
},

Upvotes: 2

Related Questions