Polymer 2: benutzerdefinierte Validierung mit Papier-Eingang

Question

Ich bin ein paper-input wie folgt aus:

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

Ich möchte meine eigene Logik hinzufügen, um die Eingabe zu bestätigen. Ich habe Informationen darüber gesucht, aber ich habe nur Polymer 1.x Beispiele gefunden. Wie kann ich die benutzerdefinierte Eingabevalidierung in Polymer 2 hinzufügen?

EDIT:

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

Answer 1

Ihre Nutzung des Prüfers sieht richtig, aber die Definition des Validator fehlt.

Der Schlüssel zu den Validator Zugabe ist:

1. eine schablonen weniger individuelle Element definieren, die das Verhalten Polymer.IronValidatorBehavior implementiert.

   Polymer 2.x:

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

   Polymer 1.x:

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

2. in diesem Element definieren validate(value), die einen booleschen zurückgibt, der angibt, ob die value ist gültig.

Polymer 2.x Beispiel:

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); 

Hinweis ready() verwendet eine Abhilfe für einen known issue with IronValidatorBehavior in Polymer 2. Alternativ können Sie den Validator mit dem Polymer 1.x Syntax definieren (noch in Polymer unterstützt 2):

Polymer({ 
    is: 'ssn-validator', 

    behaviors: [ 
    Polymer.IronValidatorBehavior 
    ], 

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

demo

Answer 2

UPDATE: Der Fehler behoben ist und funktioniert Version 2.1.0

Die benutzerdefinierten Validatoren funktionieren nicht mit Polymer 2.0-basierten Strukturen. Es ist ein Fehler zu melden hier: https://github.com/PolymerElements/iron-validator-behavior/issues/30

Eine Abhilfe ist nicht die IronValidatorBehavior zu verwenden und die folgende Zeile in die connectedCallback() Funktion hinzufügen:

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}); 
    }