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

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>

但是，由于插槽元素创建一个轻型dom（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元素中放置了一个属性invalid，以检查何时无效，当我验证表单时，我也将函数称为validate paper-radio-groups

CSS：

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

HTML：

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

JS：

 _isRadioGroupInvalid(input) {
    if (input === undefined) {
      return true;
    } else {
      return false;
    }
  }
  _validateRadioGroups() {
    for (let radioGroup of this.$.form.querySelectorAll('paper-radio-group')) {
      if (radioGroup.getAttribute('invalid') === '') {
        return false;
      }
    }
    return true;
  }

 _validateForm() {
    if (this.$.form.validate() === false && this._validateRadioGroups() === false) {
      //do case invalid form
    } else {
      //do case valid form
    }
  }