紙入力：異なるエラーメッセージ（自動検証なし）

Question

paper-input要素に異なるエラーメッセージを追加する可能性はありますか？以下を仮定しましょう：

私は5 paper-inputフィールドで構築された登録フォームを持っています。 2つは電子メールフィールド（電子メールと電子メールの検証）です。今私は両方のフィールドに有効な電子メールアドレスを検証するためのパターンを入れ、入力フィールドの両方をauto-validateに設定しました。 error-messageは、カスタムの翻訳可能な文字列です。これは次のようになりました。

<paper-input id="__form_field_email" 
       tabindex="3" 
       label="[[xTranslate('application.modules.users.new.fields.email')]]" 
       auto-validate 
       pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}" 
       error-message="[[xTranslate('application.modules.users.new.error_messages.email_not_valid')]]"></paper-input> 

    <paper-input id="__form_field_email_validation" 
       tabindex="4" 
       label="[[xTranslate('application.modules.users.new.fields.email_validation')]]" 
       auto-validate 
       pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}" 
       error-message="[[xTranslate('application.modules.users.new.error_messages.email_not_valid')]]"></paper-input> 

フィールドに2つの異なる電子メールアドレスを入力する以外は、すべて正常に動作します。最後にpaper-buttonがあり、リスナはon-tapです。クリックすると、フォームが検証されます。しかし、電子メールアドレスが一致しない場合は、ユーザーが無効なアドレスを入力した場合にエラーメッセージが適用されないため、1つ（または両方）フィールドのエラーメッセージを交換するだけではなりません。 。

もう1つ、多分「スタンドアロン」のエラーメッセージを追加する可能性はありますか？私はpaper-input-errorと考えましたが、invalidプロパティはreadOnlyで設定できません。

ありがとうございます。

Answer 1

質問の最終的な部分に対処すると、独自のカスタムバリデータを記述することによって、要素の有効性をいつでも制御できます。たとえば、次のように定義された1：

<link rel="import" href="../../bower_components/polymer/polymer-element.html"> 
<link rel="import" href="../../bower_components/iron-validator-behavior/iron-validator-behavior.html"> 

<dom-module id="my-value-match-validator"> 
    <script> 
    /** 
    * `my-value-match-validator` Description 
    * 
    * @summary ShortDescription. 
    * @customElement 
    * @polymer 
    * @extends {Polymer.Element} 
    */ 
    class MyValueMatchValidator extends Polymer.mixinBehaviors([Polymer.IronValidatorBehavior], Polymer.Element) { 
     /** 
     * String providing the tag name to register the element under. 
     */ 
     static get is() { 
     return 'my-value-match-validator'; 
     } 

     /** 
     * Object describing property-related metadata used by Polymer features 
     */ 
     static get properties() { 
     return { 
      name: { 
      type: String, 
      }, 
      valueToMatch: { 
      type: String, 
      value: '', 
      }, 
      allowEmpty: { 
      type: Boolean, 
      value: false, 
      }, 
      _compareValue: { 
      type: String, 
      'computed': '_computeCompareValue(valueToMatch, allowEmpty)' 
      } 
     }; 
     } 

     connectedCallback() { 
     super.connectedCallback(); 
     var validatorName = MyValueMatchValidator.is; 
     if (this.name) { 
      validatorName = this.name; 
     } 
     new Polymer.IronMeta({ type: 'validator', key: validatorName, value: this }); 
     } 

     _computeCompareValue(valueToMatch, allowEmpty) { 
     if (allowEmpty) { 
      return ''; 
     } 
     return valueToMatch; 
     } 

     validate(value) { 
     if (null == value) { 
      value = ''; 
     } 
     return this._compareValue === value; 
     } 

    } 

    window.customElements.define(MyValueMatchValidator.is, MyValueMatchValidator); 
    </script> 

</dom-module> 

は、次のように使用することができます：

<my-value-match-validator name="match_password" value-to-match="[[password]]" allow-empty="[[!enableConfirmPassword]]"></my-value-match-validator> 

<paper-input tabindex="7" id="new_password" label="Change Password" value="{{password}}" type="password" validator="min-length-validator" 
error-message="Use at least 6 characters" auto-validate></paper-input> 
<paper-input disabled="[[!enableConfirmPassword]]" tabindex="8" id="confirm_new_password" label="Confirm new password" type="password" 
auto-validate validator="match_password" error-message="The two passwords need to match" value=""></paper-input>