@api-components/api-form-mixin

<api-form-mixin> (中文(简体) )

与通过形式数据模型处理AMF数据的元素混合使用,并显示模型中的表格.

它包含常用的形式方法.

折旧通知

此元素被移动到 api-forms 仓库和 @api-components/api-forms 软件包。 此元素在迁移完成后会贬值并存档 .

使用量

安装

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

在一个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);

发展

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

本地运行演示

npm start

运行测试

npm test