@api-components/api-form-mixin

<api-form-mixin>

A mixin to be used with elements that processes AMF data via form data model and displays forms from the model.

It contains common methods used in forms.

API components

This components is a part of API components ecosystem

Usage

Installation

npm install --save @api-components/api-form-mixin

In a LitElement

import { LitElement, html, css } from 'lit-element';
import { ApiFormMixin } from '@api-components/api-form-mixin/api-form-mixin.js';
import styles from '@api-components/api-form-mixin/api-form-styles.js';
import '@polymer/iron-form/iron-form.js';

class SampleElement extends PolymerElement {
  static get styles() {
    return [
      styles,
      css`:host {
        display: block;
      }`
    ];
  }

  render() {
    const { model: items, allowHideOptional, optionalOpened, allowDisableParams } = this;
    return html`
    <h1>Form</h1>
    <iron-form>
      <form enctype="application/json">
      ${items ? items.map((item, index) => html`<div class="form-item">
        <div class="${this.computeFormRowClass(item, allowHideOptional, optionalOpened, allowDisableParams)}">
          <input
            data-index="${index}"
            type="text"
            name="${item.name}"
            ?required="${item.required}"
            .value="${item.value}"
            @change="${this._modelValueChanged}">
        </div>
      </div>`) : undefined}
      </form>
    </iron-form>`;
  }

  _modelValueChanged(e) {
    const index = Number(e.target.dataset.index);
    if (index !== index) {
      return;
    }
    this.model[index].value = e.target.value;
    this._requestRender();
  }
}
customElements.define('sample-element', SampleElement);

Installation

git clone https://github.com/advanced-rest-client/api-form-mixin
cd api-form-mixin
npm install

Running the demo locally

npm start

Running the tests

npm test

Changelog

3.0.3 (2019-08-15)

Bug Fixes

• fixing delete button index selection (9e55c64)
• fixing optional CSS attribute name after the change (ddbb196)

Features

• styles: adding margin to the inline docs (a13a485)

<a name="3.0.4"></a>