@advanced-rest-client/form-data-editor



<form-data-editor>

An element to edit form data (x-www-form-urlencoded).

The element renders a form that allows to enter form data values.

It may be used with AMF json/ld model via api-view-model-transformer to transform AMF model to the data view model.

``html

`

Usage

$3


`
npm install --save @advanced-rest-client/form-data-editor
`

$3

`html









`

$3

`js
import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/form-data-editor/form-data-editor.js';

class SampleElement extends PolymerElement {
render() {
return html
.value="${this.payloadValues}"
.model="${this.viewModel}"
@value-changed="${this._valueHandler}"
@model-changed="${this._modelHandler}">
;
}

_valueHandler(e) {
this.payloadValues = e.detail.value;
}

_modelHandler(e) {
this.viewModel = e.detail.value;
}
}
customElements.define('sample-element', SampleElement);
`

$3

#### allowDisableParams

When set it renders a checkbox next to each for item that allows to disable the item.
The item is in the view and in generated data mode but is ignored when producing the value.

#### allowCustom

When set is renders "add parameter" button and allows to create new form value.
Mandatory for stand-alone use.

#### allowHideOptional

When item.required model property is not set and this value is set then it hides all optional items (not marked as required)
and renders a checkbox to render hidden items in the view.

`html


`

This editor renders only param1 parameter and hides param2 form item.
The user can render hidden items at any time.

$3

You can produce the view model from model generated by AMF parser via api-view-model-transformer element.
This element produces common model for query parameters, URI parameters, body, and headers.

`html




`

$3

`sh
git clone https://github.com/advanced-rest-client/form-data-editor
cd form-data-editor
npm install
`

$3

`sh
npm start
`

$3


`sh
npm test
``

$3

This components is a part of API components ecosystem