Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

New core element suggestion: <core-form> #15

Open
techniq opened this issue Jul 9, 2014 · 8 comments
Open

New core element suggestion: <core-form> #15

techniq opened this issue Jul 9, 2014 · 8 comments
Labels

Comments

@techniq
Copy link

techniq commented Jul 9, 2014

I wasn't sure the best place to put this suggestion, so I'm starting here :)

One feature I like about Angular is how easy it is to disable a submit button if a form has any invalid inputs.

<form name="myForm">
    <input type="text" ng-model="foo.name" required />
    <button ng-disabled="myForm.$invalid">
</form>

Since <core-input> already has the invalid boolean attribute if an input has the required or validate attributes set / falsy, it seems like it wouldn't be too hard to create a <core-form> element to replace a standard <form> that would observe all it's inputs and aggregate their invalid attributes to it's own invalid attribute.

<core-form id="myForm">
    <input type="text" value="{{ foo.name }}" required />
    <paper-button disabled="{{ $.myForm.invalid }}">
</core-form>

I noticed while reviewing the Topeka project they currently list all the individual inputs on whether to show the "check" button. Since it's using a <core-selector> for the avatar selection, I'm not sure how best that would tie into a <core-form> parent tag.
https://github.com/Polymer/topeka-elements/blob/master/topeka-profile.html#L160

Thoughts?

@sjmiles
Copy link
Contributor

sjmiles commented Jul 9, 2014

I've been working on something like this, stay tuned.

@sjmiles
Copy link
Contributor

sjmiles commented Jul 9, 2014

@techniq
Copy link
Author

techniq commented Jul 10, 2014

Great! I'll keep an eye out. Ajax-form looks interesting as well.

@fabianhjr
Copy link

Hey, the ajax-form WebComponent was really useful. Thanks. :D

@chrisconover
Copy link

@sjmiles any updates on core-form?

@rnicholus
Copy link

@chrisconover I think there was initially an attempt to do this in the easyform repo, but that seems to have stalled in September. Is there something missing from ajax-form? That seems to be the recommended element to use for such a thing going forward. Disclaimer: I'm the author of ajax-form.

@saurshaz
Copy link

saurshaz commented Jun 2, 2015

Anything new in Polymer 1.0.0 as an alternative for this ?

@notwaldorf
Copy link

We've added iron-form as a Polymer 1.0 element. It's brand new, so it would be awesome if you could take it for a spin and tell us how it fares :)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

8 participants