Hi
I am trying to create custom form element which I am trying to reuse in
other applications developed in angular and jsp page of Java
my-element.js:
class MyElement extends HTMLElement {
// This gets called when the HTML parser sees your tag
constructor() {
super(); // always call super() first in the ctor.
this.msg = 'Hello, World!';
}
// Called when your element is inserted in the DOM or
// immediately after the constructor if it’s already in the DOM
connectedCallback() {
this.innerHTML = `<form action="/action_page.php">
<div class="container">
<label><b>Name</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label><b>Age</b></label>
<input type="text" placeholder="Enter Age" name="age" required>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Add</button>
</div>
</div>
</form>`;
}
}
// This registers your new tag and associates it with your class
window.customElements.define('my-element', MyElement);
my-element.html:
<!doctype html><html><head>
<meta charset="utf-8">
<script
src="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/webcomponentsjs/webcomponents-lite.js";></script>
<link rel="import"
href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/polymer/polymer.html";>
<link rel="import"
href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/iron-ajax/iron-ajax.html";>
<script src="my-element.js"></script>
<!-- <link rel="import" href="add-form.html"> -->
</head><body><my-element></my-element>
</body></html>
Two issues I am struggling with now are below
1.Can i incude both the files as below to my angular and java jsp page and
use custom tag to work?
<link rel="import" href="my-element.html"><script src="my-element.js"></script>
<my-element></my-element>
1. I am trying to pass below json object as an attribute to custom form
element and trying to render custom form elements
[ { "name":"Name", "type":"text", "size":"20", "readyOnly": false,
"validateFunction":"onlyText" }, { "name":"Age", "type":"number",
"size":"3", "readyOnly": false, "validateFunction":"onlyNumber" } ]
I tried using below way to inject json data to custom element to render
form elements based on json but no luck and there are no console errors
<my-element form-data="{{data}}"></my-element>
https://stackoverflow.com/questions/44333308/polymer-using-custom-element-in-other-projects-like-angular-and-java-jsp
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/dac78b29-0eb6-47cd-98d8-21f1cfe6c9eb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
