support automated invalid state management

[jab]

Frameworks like Angular provide a compelling example (working plnkr):

<form name="myform">
  <input type="text" ng-model="userid" name="userid" placeholder="userid" required>
  <input type="email" ng-model="email" name="email" placeholder="email" required>
  <input type="tel" ng-model="tel" name="tel" placeholder="tel" required>
  (...)
  <input type="submit" ng-disabled="myform.$invalid" value="submit">
</form>

This example live binds the submit button's disabled state to the form's invalid state with simply ng-disabled="myform.$invalid", no matter how many inputs are added to the form. The framework manages the auto-created myform.$invalid variable, keeping it up-to-date for you with the ored together result of input.$invalid for each input in the form. So you can add n more inputs to the form and this will still work, without having to manually add references to the additional inputs in any other places.

Discussion in #60 indicated Polymer may add support for this in the future, so tracking progress here.

[jab]

Hi @notwaldorf and Polymer team, Monica mentioned this ticket requires some new features in Polymer to land first. Can you please reference those here? Thanks, and interested to know if there's any way community members can help.

[notwaldorf]

The change needed is about being notified when distributed children change. There's already a PR in flight for that: https://github.com/Polymer/polymer/issues/1773

[jab]

Cool, thanks for the link, @notwaldorf, look forward to following progress and helping out if I can!

[notwaldorf]

I think this also depends on https://github.com/PolymerElements/iron-form/issues/46

[jab]

Saw Polymer/polymer#1773 has recently been closed (though apparently the required code got merged in a while ago). Does that help pave the way for this? If so would be happy to try to work up a PR but wanted to check in first.

[notwaldorf]

I've been working on this, but it's not going great. Basically, because the elements aren't actually in the form, they're just distributed children, a native <input type=submit> won't actually submit the form.

Feel free to take a stab at it

[jab]

Great to hear you've been working on it but sorry to hear it hasn't been going well! If you're hitting issues that doesn't sound very promising for me (also I don't immediately follow what the complication is). Any other underlying changes to Polymer that could make this easier?

[notwaldorf]

I will try to take a look at it again this week, and figure out what was going on. In the meantime, feel free to try to do it on your own -- maybe there's a simpler solution (I'm essentially trying to fix https://github.com/PolymerElements/iron-form/issues/46, but your issue might not need that)

[notwaldorf]

Sorry, re-reading the original issue, I think this is a much harder/completely different issue that won't get magically fixed with #46). Basically, you would have to add an onchange handler to every input, so that you can live-update their invalid state (since only auto-validate paper-inputs even do that), and update the form's invalid attribute any time that handler fires.

I'm not sure that's a feature we're going to add, since it's pretty involved. It's totally a doable thing that you should be able to do in your application, though