I have html page using polymer builtin elements along with my customElement(my-form)
<dom-module id="my-form">
<template>
<div>
<paper-input id="inputName" label="Name" required error-message="Required Input" value="{{data.name}}"> Name </paper-input>
<paper-input id="inputAge" label="Age" required error-message="Required Input" value="{{data.age}}"> Age </paper-input>
<div class="rows layout horizontal">
<paper-button id='cancelBtn' tabindex="0">Cancel</paper-button>
<paper-button id='saveBtn' tabindex="0">Save</paper-button>
</div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'my-form',
created: function() {
var saveBtn = document.querySelector('#saveBtn');
saveBtn.addEventListener('click', function() {
document.getElementById('inputName').validate();
document.getElementById('inputAge').validate();
});
//initial value
this.data = {};
},
properties: {
data: {
type: Object,
value: {},
},
}
//load my-form with data provided
refreshFormUI: function(dataReceived) {
this.data = dataReceived;
console.log("refreshFormUI() - name = " + this.data.name);
console.log("refreshFormUI() - age = " + this.data.age);
},
});
</script>
I need to pass the "data"object from a external javascript file. I tried the following but I dont see the refreshFormUI() being called.
external_js_file.js :
function someEvent() {
my_form_element = document.querySelector('#my_form_element');
var mockData = {
name: "Demo Name",
age: '20',
};
my_form_element.refreshFormUI(mockData);
}