Wondering what’s next for npm?Check out our public roadmap! »

    This package has been deprecated

    Author message:

    Use @api-components/api-forms instead

    @api-components/api-form-mixin
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.3 • Public • Published

    Published on NPM

    Build Status

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

    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

    Install

    npm i @api-components/api-form-mixin

    DownloadsWeekly Downloads

    559

    Version

    3.1.3

    License

    Apache-2.0

    Unpacked Size

    47.9 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar