纸张输入：不同的错误消息（带和不带自动验证）

Question

是否有可能向paper-input 元素添加不同的错误消息？让我们假设以下内容：

我有一个注册表单，其中包含 5 个paper-input 字段。其中两个是电子邮件字段（电子邮件和电子邮件验证）。现在，我在两个字段中都设置了一个模式来验证有效的电子邮件地址，并将两个输入字段都设置为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>

一切正常，除了用户在字段中输入两个不同的电子邮件地址。最后有一个paper-button 和一个on-tap 侦听器。单击后，表单将得到验证。但是：如果电子邮件地址不匹配，我不能只将错误消息交换为一个（或两个）字段，因为如果用户随后输入无效地址，则错误消息不适用.

是否有可能添加另一个，也许是“独立”的错误消息？我想过paper-input-error，但是invalid属性是只读的，不能设置。

感谢任何提示。

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