如何在聚合物中强制执行所需的纸-无线电基团

How to enforce required paper-radio-group in Polymer?

本文关键字：无线电 聚合物 强制执行      更新时间：2023-09-26

在paper-radio-group上执行require检查的最佳方法是什么?我看到另一个使用fallback-selection的问题和答案，在这里，但我想强迫用户选择"是"或"否"。

<paper-radio-group selected="" attr-for-selected="value" data-required="{{question.required}}">
    <paper-radio-button name="{{question.id}}" value="yes">Yes</paper-radio-button>
    <paper-radio-button name="{{question.id}}" value="no">No</paper-radio-button>
</paper-radio-group>

我能想到的唯一方法是在最后运行一个检查器函数来检查它。

checkAnswers: function() {
    var currentGroup = document.querySelector('.question-group.iron-selected'),
        answers = Array.prototype.slice.call(currentGroup.querySelectorAll('paper-input, paper-radio-group'));
    return answers.every(function(a) {
        return a.validate && a.validate() || a.nodeName === 'PAPER-RADIO-GROUP' && a.dataRequired && a.selected;
    });;
},

上面的工作，但我仍然需要找出一种方法来显示错误给用户。是否有更好的方法来验证所需的paper-radio-group ?

我假设您在submit处理程序中调用checkAnswers()。注意，<iron-form>.validate()执行类似的逻辑，只是它只对具有IronFormElementBehavior和required属性的子节点调用validate()。如果您将required应用于适当的输入元素，则可以将checkAnswers()替换为this.$.form.validate()。

submit: function() {
  //var isValid = checkAnswers();
  var isValid = this.$.form.validate();
}

<paper-radio-group>实际上没有IronFormElementBehavior，所以它的required属性没有作用。您可以通过使用您自己的自定义元素包装<paper-radio-group>来解决这个问题，该元素可以适当地添加行为:

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

然后，将<paper-radio-group>替换为<radio-group>:

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


<head>
  <base href="https://polygit.org/polymer+1.11.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-form/iron-form.html">
  <link rel="import" href="iron-label/iron-label.html">
  <link rel="import" href="paper-radio-group/paper-radio-group.html">
  <link rel="import" href="paper-radio-button/paper-radio-button.html">
  <link rel="import" href="paper-button/paper-button.html">
</head>
<body>
<x-form></x-form>
<dom-module id="x-form">
  <template>
    <iron-form id="form">
      <form action="">
        <iron-label>Do you agree?
          <radio-group name="answerswers" id="answerswer" attr-for-selected="value" required>
            <paper-radio-button name="answerswerY" value="yes">Yes</paper-radio-button>
            <paper-radio-button name="answerswerN" value="no">No</paper-radio-button>
          </radio-group>
        </iron-label>
        <div>
          <paper-button on-click="submit">Submit</paper-button>
        </div>
      </form>
    </iron-form>
  </template>
  <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-form',
        submit: function() {
          console.log('valid', this.$.form.validate(),
                      'answer', this.$.answer.selectedItem && this.$.answer.selectedItem.value);
        }
      });
    });
  </script>
</dom-module>
<dom-module id="radio-group">
  <template>
    <paper-radio-group id="group" attr-for-selected="{{attrForSelected}}" selected="{{selected}}">
      <content></content>
    </paper-radio-group>
  </template>
  <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'radio-group',
        behaviors: [
          Polymer.IronFormElementBehavior
        ],
        get selectedItem() {
          return this.$.group.selectedItem;
        },
        validate: function() {
          return this.selectedItem != null;
        }
      });
    });
  </script>
</dom-module>
</body>

codepen

对于像Yes/No这样的二进制输入，使用<paper-checkbox>可能更合适，因为它需要更少的代码并简化了该输入的形式。

<head>
  <base href="https://polygit.org/polymer+1.11.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-form/iron-form.html">
  <link rel="import" href="paper-checkbox/paper-checkbox.html">
  <link rel="import" href="paper-button/paper-button.html">
</head>
<body>
  <x-form></x-form>
  <dom-module id="x-form">
    <template>
      <iron-form id="form">
        <form action="">
          <paper-checkbox id="answerswer" required>I agree</paper-checkbox>
          <div>
            <paper-button on-click="submit">Submit</paper-button>
          </div>
        </form>
      </iron-form>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-form',
          submit: function() {
            console.log('valid', this.$.form.validate(),
                        'answer', this.$.answer.checked);
          }
        });
      });
    </script>
  </dom-module>
</body>

codepen

相关文章：