Как проверить элемент paper-radio-group с обязательным атрибутом

Это похоже на вопросэтот вопрос но это не было ответа и до 1.0.
Мне нужно убедиться, что хотя бы одинpaper-radio-button выбирается при отправке формы
Я могу разместить обязательный атрибут для каждогоpaper-radio-button но это означает, что каждый переключатель должен быть выбран.

<iron-label> Type<br/>
    <paper-radio-group name="types" allow-empty-selection attr-for-selected="value" selected="{{model.type}}" noink >
        <paper-radio-button name="type" value="home" required> Home</paper-radio-button>
        <paper-radio-button name="type" value="work" required> Work</paper-radio-button>
        <paper-radio-button name="type" value="portal" required> Portal</paper-radio-button>
        <paper-radio-button name="type" value="shipping" required> Shipping</paper-radio-button>
        <paper-radio-button name="type" value="billing" required> Billing</paper-radio-button>
        <paper-radio-button name="type" value="other" required> Other</paper-radio-button>
    </paper-radio-group>
</iron-label>
 Alan Dávalos09 июн. 2016 г., 01:30
Вы пытались отключитьallowEmptySelection и проверкаselected значение?

Ответы на вопрос(1)

Решение Вопроса

чтобы давать пользователю возможность не выбирать какую-либо радиокнопку, было бы лучше принудительно сделать выбор. Вы можете сделать это, удаливallow-empty-selection отpaper-radio-group иrequired атрибут изpaper-radio-button, Я также рекомендую использоватьfallback-selection наpaper-radio-group так что неожиданное значение вmodel.type приведет к значению по умолчанию, например «Другое».

<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> Type<br/>
            <paper-radio-group name="types"  attr-for-selected="value" fallback-selection="other" selected="{{model.type}}" noink>
              <paper-radio-button name="type" value="home"> Home</paper-radio-button>
              <paper-radio-button name="type" value="work"> Work</paper-radio-button>
              <paper-radio-button name="type" value="portal"> Portal</paper-radio-button>
              <paper-radio-button name="type" value="shipping"> Shipping</paper-radio-button>
              <paper-radio-button name="type" value="billing"> Billing</paper-radio-button>
              <paper-radio-button name="type" value="other"> Other</paper-radio-button>
            </paper-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',
          properties : {
            model: {
              type: Object,
              value: function() { return {type: 'fake'}; }
            }
          },
          submit: function() {
            console.log('type', this.model.type);
          }
        });
      });
    </script>
  </dom-module>
</body>

codepen

 fredtma09 июн. 2016 г., 08:42
спасибо, я буду использовать запасной вариант

Ваш ответ на вопрос