Как да наложа необходимата хартиена радиогрупа в 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="/bgpolymer/polymer.html">
  <link rel="import" href="/bgiron-form/iron-form.html">
  <link rel="import" href="/bgiron-label/iron-label.html">
  <link rel="import" href="/bgpaper-radio-group/paper-radio-group.html">
  <link rel="import" href="/bgpaper-radio-button/paper-radio-button.html">
  <link rel="import" href="/bgpaper-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="/bgpolymer/polymer.html">
  <link rel="import" href="/bgiron-form/iron-form.html">
  <link rel="import" href="/bgpaper-checkbox/paper-checkbox.html">
  <link rel="import" href="/bgpaper-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