ポリマー2.0で紙ラジオグループの検証を行う方法

Question

ポリマー2.0にpaper-radio-groupを使用しようとしています。この質問（How to enforce required paper-radio-group in Polymer?）では、紙の無線グループがPolymer.IronFormElementBehaviorを実装していないため、通常の検証が機能しないことがわかりました。したがって、回避策の1つの方法は、この動作を実装する新しい要素を作成することです。

私は他の質問の例のように行った：スロット要素は、光のDOM（https://www.polymer-project.org/2.0/docs/devguide/shadow-dom#shadow-dom-and-composition）を作成して、実際のpaper-radio-buttonがpaper-radio-group内部で実際にはない、

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

しかし。だから、ただ一つのラジオボタンを選択しても効果がなく、選択したラジオボタンの結果を得ることができません。

どのようにこの紙ラジオグループを作るためのアイデアは、鉄フォームの検証で動作しますか？

Answer 1

@HakanCは、私は鉄の要素の習慣を実装する必要はないことを示しているので、私は手作業による検証を終わらせました。

基本的に私は未解決の質問を強調表示するためにCSSを使用しています。

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

は、HTML：：

検証 paper-radio-groupの

CSSを私は無効であるか、ないときチェックするhtml要素に属性invalidを入れて、私は、フォームを検証するとき、私はまた、関数を呼び出します

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