Javascript 如何在聚合物中实施所需的纸张无线电组？

执行

require

检查

paper-radio-group

的最佳方法是什么？我看到另一个问题和答案使用了

回退选择

，但我想强制用户选择“是”或“否”

---

上面的方法很有效，但我仍然需要找到一种向用户显示错误的方法。是否有更好的方法验证所需的

纸质电台组

？

我假设您在

提交处理程序中调用
checkAnswers（）
。请注意，除了只对具有
IronFormElementBehavior
和
required
属性的子级调用
validate（）
之外，执行类似的逻辑。如果将
required
应用于适当的输入元素，则可以将
checkAnswers（）
替换为
this.$.form.validate（）

实际上没有
IronFormElementBehavior
，因此其
required
属性没有任何效果。您可以通过使用自己的自定义元素包装
来解决此问题，该元素可以正确添加行为：

<dom-module id="radio-group">
  <template>
    <paper-radio-group id="group"
                       attr-for-selected="{{attrForSelected}}"
                       selected="{{selected}}">
      <content></content>
    </paper-radio-group>
  </template>
  <script>
    Polymer({
      is: 'radio-group',
      behaviors: [
        Polymer.IronFormElementBehavior
      ],
      get selectedItem() {
        return this.$.group.selectedItem;
      },
      validate: function() {
        return this.selectedItem != null;
      }
    });
  </script>
</dom-module>


聚合物({
是:"电台",，
行为：[
聚合物.铁形态元素行为
],
获取selectedItem（）{
返回此项。$.group.selectedItem；
},
验证：函数（）{
返回this.selectedItem！=null；
}
});

然后，将
替换为
：


对
不



你同意吗？
对
不
提交
HTMLImports.whenReady（函数（）{
聚合物({
是：'x-form'，
提交：函数（）{
console.log（'valid'，this.$.form.validate（），
“answer”，this.answer.selectedItem&&this.answer.selectedItem.value）；
}
});
});
HTMLImports.whenReady（函数（）{
聚合物({
是:"电台",，
行为：[
聚合物.铁形态元素行为
],
获取selectedItem（）{
返回此项。$.group.selectedItem；
},
验证：函数（）{
返回this.selectedItem！=null；
}
});
});
我假设您在
submit
处理程序中调用
checkAnswers（）
。请注意，除了只对具有
IronFormElementBehavior
和
required
属性的子级调用
validate（）
之外，执行类似的逻辑。如果将
required
应用于适当的输入元素，则可以将
checkAnswers（）
替换为
this.$.form.validate（）

实际上没有
IronFormElementBehavior
，因此其
required
属性没有任何效果。您可以通过使用自己的自定义元素包装
来解决此问题，该元素可以正确添加行为：

<dom-module id="radio-group">
  <template>
    <paper-radio-group id="group"
                       attr-for-selected="{{attrForSelected}}"
                       selected="{{selected}}">
      <content></content>
    </paper-radio-group>
  </template>
  <script>
    Polymer({
      is: 'radio-group',
      behaviors: [
        Polymer.IronFormElementBehavior
      ],
      get selectedItem() {
        return this.$.group.selectedItem;
      },
      validate: function() {
        return this.selectedItem != null;
      }
    });
  </script>
</dom-module>


聚合物({
是:"电台",，
行为：[
聚合物.铁形态元素行为
],
获取selectedItem（）{
返回此项。$.group.selectedItem；
},
验证：函数（）{
返回this.selectedItem！=null；
}
});

然后，将
替换为
：


对
不



你同意吗？
对
不
提交
HTMLImports.whenReady（函数（）{
聚合物({
是：'x-form'，
提交：函数（）{
console.log（'valid'，this.$.form.validate（），
“answer”，this.answer.selectedItem&&this.answer.selectedItem.value）；
}
});
});
HTMLImports.whenReady（函数（）{
聚合物({
是:"电台",，
行为：[
聚合物.铁形态元素行为
],
获取selectedItem（）{
返回此项。$.group.selectedItem；
},
验证：函数（）{
返回this.selectedItem！=null；
}
});
});
为什么不给它一个默认值，这样它将始终是一个值为什么不给它一个默认值，这样它将始终是一个值
submit: function() {
  //var isValid = checkAnswers();
  var isValid = this.$.form.validate();
}

<dom-module id="radio-group">
  <template>
    <paper-radio-group id="group"
                       attr-for-selected="{{attrForSelected}}"
                       selected="{{selected}}">
      <content></content>
    </paper-radio-group>
  </template>
  <script>
    Polymer({
      is: 'radio-group',
      behaviors: [
        Polymer.IronFormElementBehavior
      ],
      get selectedItem() {
        return this.$.group.selectedItem;
      },
      validate: function() {
        return this.selectedItem != null;
      }
    });
  </script>
</dom-module>

<radio-group attr-for-selected="value" required>
  <paper-radio-button value="yes">Yes</paper-radio-button>
  <paper-radio-button value="no">No</paper-radio-button>
</radio-group>