1

I have a form for submitting data in Polymer that ends up looking something like:

<paper-input name="username" label="Username" on-blur="_onUsernameInput" required></paper-input>
<span class="invalid" hidden$="[[usernameValid]]">invalid</span>

The idea is that each input in the form has a validation function (e.g. "_onUsernameInput". The input is followed by the text "invalid" which is either hidden or not based on whether the validation function passes.

However, the fields I am creating in the form are dynamic:

// add new form input
var toAdd = document.createElement("paper-input");
toAdd.label = args[i].name;
toAdd.id = args[i].id;
toAdd.addEventListener("blur", args[i].verificationMethod);
Polymer.dom(insertPoint).appendChild(toAdd);

// add new "invalid" text to show or hide on validation
var spanAdd = document.createElement("span");
var prop = args[i].id + "Valid";
Polymer.dom(spanAdd).setAttribute("hidden", "[[" + prop + "]]"); // ?!?!?!
Polymer.dom(insertPoint).appendChild(spanAdd);

The point where I get stuck is in the line denoted "?!?!?!" -- how do I dynamically add an attribute with a binding (in this case, the hidden attribute bound to a boolean that will determine whether or not the "invalid" text will be visible).

Adam
  • 11
  • 2
  • Are you using Polymer 1.0? Are you trying to run the JavaScript shown in a custom Polymer element or using a Auto-binding template? Can you include example HTML and `args` data? – coderfin Jul 21 '15 at 00:42
  • @Adam Please refer http://stackoverflow.com/questions/31557807/can-dynamically-created-local-light-dom-in-polymer-be-processed-to-ensure-correc – 01es Jul 22 '15 at 23:34

0 Answers0