auto-patch-form

A form decorator which removes the need for a submit button - it sends pooled PATCH requests automatically


Keywords
web-component, web-components, polymer, service worker, form
License
MIT
Install
bower install auto-patch-form

Documentation

auto-patch-form

A form decorator similar to iron-form which removes the need for a submit button - it sends pooled PATCH requests automatically as individual controls are updated.

Note: There's no point adding method="patch" as browsers will likely convert it to get or post.

The example below automatically sends a GET to the action URL in the form's ready() lifecycle event handler. When the response is received it updates the value property of the elements with a json-path attribute.

When the user updates the form a PATCH is sent to the action URL for each field which has been updated. The PATCH requests are debounced so that they can be pooled if necessary.

<form is="auto-patch-form" get-when="ready" action="//api.example.com/auto-patch-form">
  <paper-input label="First name" json-path="$.user.first_name"></paper-input>
  <paper-input label="Last name" json-path="$.user.last_name"></paper-input>
</form>

The system supports simple json-path expressions which start with $. followed by one or more element names separated by dots. The json-path expression describes the path to the value in the GET response. eg:

{
    "user": {
        "first_name": "Test",
        "last_name": "User",
        "email": "test@example.com"
    },
    "note": "this field is ignored by the form"
}

A JSON API response would be requested by adding `content-type="application/vnd.api+json"' to the form and served as:

{
    "data": {
        "type": "user",
        "id": "12345678",
        "attributes": {
            "user": {
                "first_name": "Test",
                "last_name": "User",
                "email": "test@example.com"
            },
            "note": "this field is ignored by the form"
        }
    }
}

To allow the back-end to manage syncing of PATCH requests from multiple clients, the format differs from the REQUEST:

{
    "$.user.first_name": {
        "value": "Updated",
        "time": 1463484440707
    },
    "$.user.last_name": {
        "value": "Name",
        "time": 1463484440907
    }
}

The JSON API PATCH request has the equivalent content in the attributes field and echos the type and id of the GET request, or defaults to { "type": "merge", "id": "self", ... } if no GET request was issued.