javascript - 如何在 Polymer 中强制执行所需的纸质 radio 组？-6ren

javascript - 如何在 Polymer 中强制执行所需的纸质 radio 组？

转载作者：行者123 更新时间：2023-11-28 18:31:03

对 paper-radio-group 强制执行 require 检查的最佳方式是什么？我看到另一个使用 fallback-selection 的问题和答案，here ，但我想强制用户选择"is"或“否”。

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

最佳答案

我假设您调用checkAnswers()在你的submit处理程序。请注意 <iron-form>.validate() 执行类似的逻辑，只是它只调用 validate()对于具有 IronFormElementBehavior 的 child 和 required属性。如果您申请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="answers" id="answer" attr-for-selected="value" required>
            <paper-radio-button name="answerY" value="yes">Yes</paper-radio-button>
            <paper-radio-button name="answerN" 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

对于像这些是/否答案这样的二进制输入，可能适合使用 <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="answer" 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>