Come aggiungere un validatore personalizzato all'input della carta?

Question

È necessario aggiungere un validatore personalizzato che esegua alcune convalide complesse in base ai valori di altri campi nell'html.

Si è tentato di aggiungere la funzione di convalida personalizzata come attributo all'elemento di input della carta, ma non si chiama .

<dom-module id='custom-ele'> 
      <paper-input is="iron-input" id='input_1' label='Label_1' validator='validate_1'></paper-input> 
      <paper-input is="iron-input" id='input_2' label='Label_2' validator='validate_2'></paper-input> 
      ... 
    </dom-module> 
    <script> 
    Polymer({ 

     is: 'custom-ele', 

     validate_1: function() { 
      //validation code 
     }, 

     validate_2: function() { 
      //validation code 
     } 

    }); 
    </script> 

Answer 1

Il validatore deve implementare IronValidatorBehavior (vedi docs). Inoltre, se si desidera convalidare automaticamente, è necessario impostare l'attributo auto-validate. Per raggiungere il tuo obiettivo è possibile creare un validatore personalizzato per ogni tipo di convalida che si desidera utilizzare. In alternativa, è possibile creare un validatore personalizzato generico e impostare la funzione di convalida al momento dell'inizializzazione. Ecco un esempio.

Polymer({ 

    is: 'custom-validator', 

    behaviors: [ 
     Polymer.IronValidatorBehavior 
    ] 
}); 

<dom-module id='validation-element'> 
    <template> 
     <custom-validator id="valid1" validator-name="validator1"></custom-validator> 
     <custom-validator id="valid2" validator-name="validator2"></custom-validator> 
     <paper-input auto-validate id='input_1' label='Label_1' validator='validator1'></paper-input> 
     <paper-input auto-validate id='input_2' label='Label_2' validator='validator2'></paper-input> 
    </template> 
</dom-module> 
<script> 

    Polymer({ 

     is: 'validation-element', 

     validate1: function(value) { 
      //validation code 
      console.log("validate1"); 
      return value.length > 3; 
     }, 

     validate2: function(value) { 
      //validation code 
      console.log("validate2"); 
      return value.length > 5; 
     }, 

     ready: function() { 
      this.$.valid1.validate = this.validate1.bind(this); 
      this.$.valid2.validate = this.validate2.bind(this); 
     } 

    }); 

</script> 

è possibile trovare un esempio di lavoro in questo plunk.

Answer 2

Ok, la mia risposta potrebbe non essere la "via del polimero" ma funziona ed è più il modo "tradizionale programmatico".

La breve lista di idee per questa soluzione:

1. carta-input alias look-up di ferro-immettere il valore dell'attributo validatore nell'oggetto globale ferro-meta
2. Ogni Polymer.IronValidatorBehavior ha un nome (validatorName), un tipo ('validatore') e una funzione validate
3. Ogni Polymer.IronValidatorBehavior si registra nella lista corrispondente 'validatore' nell'oggetto ferro-meta

Quindi questo è un breve codice che ho derivato dal punti di cui sopra:

var validator = { 
    validatorName: 'my-custom-validator', 
    validatorType: 'validator', 
    validate:  function(value) { ...my validation code... } 
}; 
new Polymer.IronMeta({ 
    type: validator.validatorType, 
    key: validator.validatorName, 
    value: validator 
}); 

È possibile inserire questo codice in una o gestore di eventi 'allegato' 'creato'. Ma eseguirlo prima di ogni convalida è fatto naturalmente ...

Quindi è possibile scrivere

<paper-input validator="my-custom-validator"></paper-input> 

Se si controlla se il tuo vuole validatore è registrarsi con l'ingresso, navigare lungo la dom-albero in qualsiasi strumento di sviluppo e hit: $0.hasValidator() e $0.validator per vedere se il tuo validatore è stato registrato con successo con l'input.