Как обеспечить требуемую бумажную радиогруппу в Polymer?

Как лучше всего принудительно require проверить paper-radio-group? Я видел еще один вопрос и ответ, в котором используется 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?


javascript validation polymer polymer-1.0
person Vicky Leong    schedule 23.06.2016    source источник
comment
Почему бы вам не дать ему значение по умолчанию, таким образом, оно всегда будет значением   -  person a1626    schedule 24.06.2016

Ответы (1)


arrow_upward
3
arrow_downward

Я предполагаю, что вы вызываете checkAnswers() в обработчике submit. Обратите внимание, что <iron-form>.validate() выполняет аналогичную логику, за исключением того, что вызывает validate() только для дочерние элементы, имеющие атрибуты IronFormElementBehavior и 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>

codepen

person tony19    schedule 24.06.2016