Question

我正在尝试在Polymer 2.0上使用paper-radio-group。我在这个问题（How to enforce required paper-radio-group in Polymer?）上发现普通验证不起作用，因为paper-radio-group没有实现Polymer.IronFormElementBehavior。因此，解决方法之一是创建一个实现此行为的新元素。

我确实喜欢另一个问题的例子：

<dom-module id="app-radio-group">
  <template>
    <style include="shared-styles">
       [invalid] ::slotted(paper-radio-button) {
        --paper-radio-button-label-color: red;
        --paper-radio-button-unchecked-color: red;
      }
    </style>
    <paper-radio-group
      id="group"
      attr-for-selected="{{attrForSelected}}"
      selected="{{selected}}">
      <div invalid$="[[!valid]]">
        <slot></slot>
      </div>
    </paper-radio-group>

  </template>

  <script>
    class AppRadioGroup extends Polymer.Element {
      static get is() { return 'app-radio-group'; }

      static get behaviors() {
        return [
          'Polymer.IronFormElementBehavior'
        ];
      }

      get selectedItem() {
        return this.$.group.selectedItem;
      }

      validate() {
        this.valid = this.selectedItem != null;
        return this.valid;
      }
    }
    window.customElements.define(AppRadioGroup.is, AppRadioGroup);
  </script>
</dom-module>

但是，由于slot元素创建了一个轻量级（https://www.polymer-project.org/2.0/docs/devguide/shadow-dom#shadow-dom-and-composition），实际的paper-radio-button实际上并不在paper-radio-group内。因此，仅选择一个单选按钮的效果不起作用，我无法获得所选单选按钮的结果。

如何使这篇论文 - 无线电组能够使用铁形式验证吗？

Answer 1

由于@HakanC告诉我，我不需要实施ironformelement行为，我最终进行了手动验证。

基本上我使用CSS来突出显示未回答的问题。我在html元素中放置了一个属性priority queue来检查何时无效，当我验证表单时，我也将函数称为validate invalid s

CSS：

paper-radio-group

HTML：

  paper-radio-group[invalid] paper-radio-button {
    --paper-radio-button-label-color: red;
    --paper-radio-button-unchecked-color: red;
  }

JS：

      <div class="question-title">Question?</div>
      <paper-radio-group invalid$="[[_isRadioGroupInvalid(answer)]]" attr-for-selected="value" selected="{{answer}}">
        <paper-radio-button value="true">Yes</paper-radio-button>
        <paper-radio-button value="false">No</paper-radio-button>
      </paper-radio-group>

如何在Polymer 2.0上进行纸张无线电组验证

1 个答案: