Sea Form
Includes
SeaForm
An iron-form based SeaElement that adds the missing convenience you were looking for in modern forms.
The sea-form
supports dirty checking. When dirty-submit-only
is set, submitting the form will only collect changed values.
is-dirty
will always tell you if the form was modified since it connected.
You can call the setAsClean()
method any time to reset the initial state to what's currently in the form.
Example:
<sea-form dirty-submit-only is-dirty="{{isMyFormDirty}}">
<form>
...
</form>
</sea-form>
SeaFormButton
A paper-button that can submit an iron-form.
The sea-form
and sea-form-button
elements go well together for any kind of forms:
<sea-form on-sea-form-submitted="...">
<form>
...
<sea-form-button submit>Submit</sea-form-button>
</form>
</sea-form>
SeaValidatorMixin
A mixin used to implement custom validators, like the included sea-match-password-validator
.
SeaMatchPasswordValidator
A SeaValidator that ensures that two password field matches. Example:
<sea-match-password-validator password="[[newPassword]]"></sea-match-password-validator>
<sea-form>
<form>
<paper-input name="newPassword"
label="New password"
type="password"
value="{{newPassword}}"></paper-input>
<paper-input name="confirmNewPassword"
label="Confirm new password"
type="password"
validator="sea-match-password-validator"
error-message="Passwords don't match."></paper-input>
<sea-form-button raised
submit>Submit</sea-form-button>
</form>
</sea-form>
Install
yarn add @xpertsea/sea-form
Contribute
VSCode plugins
Requirements
Clone
git clone git@github.com:Xpertsea/sea-form.git
cd sea-form
yarn install
View documentation
yarn doc
Test
yarn test
Lint
yarn lint