JSPM – @api-components/api-form-mixin@3.1.4

Package Exports

@api-components/api-form-mixin
@api-components/api-form-mixin/api-form-mixin.js
@api-components/api-form-mixin/api-form-styles.js
@api-components/api-form-mixin/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@api-components/api-form-mixin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

<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.

Deprecation notice

This element is moved to api-forms repository and @api-components/api-forms package. This element will be deprecated and archived once the migration finish.

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 LitElement {
  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);

Development

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