@xpertsea/sea-form v3.0.0

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

• ESLint
• Polymer IDE

Requirements

• yarn
• polymer-cli

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