Polymer 2: пользовательская проверка с бумажным вводом

Я использую paper-input вот так:

<paper-input 
    type="number" 
    allowed-pattern="[0-9,]"
    validator="my-validator"
    auto-validate="true"
    error-message="Invalid input!">
</paper-input>

Я хотел бы добавить свою собственную логику для проверки ввода. Я искал информацию об этом, но нашел только примеры Polymer 1.x. Как добавить пользовательскую проверку ввода в Polymer 2?

ИЗМЕНИТЬ:

<paper-input 
    type="number" 
    allowed-pattern="[0-9,]"
    validator="my-validator1"
    auto-validate="true"
    value="{{value1}}"
    error-message="Invalid input!">
</paper-input>

<paper-input 
    type="number" 
    allowed-pattern="[0-9,]"
    validator="my-validator2"
    auto-validate="true"
    value="{{value2}}"
    error-message="Invalid input!">
</paper-input>

<paper-input 
    type="number" 
    allowed-pattern="[0-9,]"
    validator="my-validator3"   <!-- value1 + value 2 == value3 -->
    auto-validate="true"
    value="{{value3}}"
    error-message="Invalid input!">
</paper-input>

polymer behavior polymer-2.x
person Amparo    schedule 04.06.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Ваше использование валидатора выглядит правильно, но определение валидатора отсутствует.

Ключом к добавлению валидатора является:

  1. Определите пользовательский элемент без шаблона, реализующий поведение Polymer.IronValidatorBehavior.

    Полимер 2.x:

    class Foo extends Polymer.mixinBehaviors([Polymer.IronValidatorBehavior],
                                         Polymer.Element)
{...}

    Полимер 1.x:

    Polymer({
  ...
  behaviors: [
    Polymer.IronValidatorBehavior
  ]
});

  2. В этом элементе определите validate(value), который возвращает логическое значение, указывающее, является ли допустимым value.

Пример полимера 2.x:

class SsnValidator extends Polymer.mixinBehaviors([Polymer.IronValidatorBehavior], Polymer.Element) {
  static get is() { return 'ssn-validator'; }

  ready() {
    super.ready();

    // Workaround https://github.com/PolymerElements/iron-validator-behavior/issues/30#issuecomment-305643574
    new Polymer.IronMeta({type: 'validator', key: SsnValidator.is, value: this});
  }

  validate(value) {
    const re = /^\d{3}-?\d{2}-?\d{4}$/;
    return re.test(value);
  }
}

window.customElements.define(SsnValidator.is, SsnValidator);

Примечание ready() использует обходной путь для известной проблемы с IronValidatorBehavior в Polymer 2. . В качестве альтернативы вы можете определить валидатор с синтаксисом Polymer 1.x (по-прежнему поддерживается в Polymer 2):

Polymer({
  is: 'ssn-validator',

  behaviors: [
    Polymer.IronValidatorBehavior
  ],

  validate: function(value) {
    const re = /^\d{3}-?\d{2}-?\d{4}$/;
    return re.test(value);
  }
});

демонстрация

person tony19    schedule 04.06.2017
comment
Спасибо, @tony19, ваш ответ довольно хорош, но он не работает, когда мне нужно проверить, равно ли третье paper-input первому paper-input плюс второе paper-input. Я получаю значение undefined, когда пытаюсь получить первое и второе значение. Я собираюсь отредактировать свой вопрос, чтобы показать это. - person Amparo; 04.06.2017

arrow_upward
0
arrow_downward

ОБНОВЛЕНИЕ: ошибка устранена и работает в версии 2.1.0.

Пользовательские валидаторы не работают со структурой на основе класса полимера 2.0. Здесь есть ошибка с отчетом: https://github.com/PolymerElements/iron-validator-behavior/issues/30

Обходной путь — не использовать IronValidatorBehavior и добавить следующую строку в функцию connectedCallback():

  class PasProfilePasswordValidator extends Polymer.Element {
  static get is() {return 'pas-profile-password-validator';}
...
connectedCallback() {
    super.connectedCallback();
    new Polymer.IronMeta({type: 'validator', key: PasProfilePasswordValidator.is, value: this});
  }
person aphex    schedule 06.11.2017