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侦听器。单击时，表单将得到验证。但是：如果电子邮件地址不匹配，我不能只为一个（或两个）字段交换错误消息，因为如果错误消息不适用，那么错误消息不适用用户然后输入无效的地址。

是否有可能添加另一个，可能＆＃34;独立＆＃34;错误信息？我考虑过paper-input-error，但invalid属性是readOnly并且无法设置。

感谢任何提示。

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>

paper-input：不同的错误消息（w和w / o自动验证）

1 个答案: