将空属性设置为另一个内部的聚合物组件

Question

我一直在尝试将一个空属性设置为另一个元素中的聚合物元素。

这是我的自定义元素的代码。我想要做的是，只要自定义核心输入的属性为真，就将 "required" 设置为输入元素。

<polymer-element name="custom-core-input" attributes="columnId inputError validation required">
<template>
    <section>
        <paper-input-decorator id="decorator" error="{{inputError}}">
            <input id="custominput" is="core-input" validate="{{validation}}" on-change="{{inputCommited}}">
        </paper-input-decorator>
    </section>
</template>
<script>
    Polymer({
        inputCommited: function () {
            this.$.decorator.isInvalid = !this.$.custominput.validity.valid;
        }
    });
</script>

到目前为止，我已经尝试访问输入元素并从脚本中设置 'attr'，我认为这行不通，但值得一试。我只是不知道如何解决这个问题，我觉得一定有一个简单的答案，但想不出来。

此外（和无关），我认为我做错了其他事情，因为 paper-input-decorator 不会 'take' inputError 值。

感谢阅读:)

Answer 1

这是一种方法，在元素原型中：

<script>
        Polymer({
            ready: function () {
                //check the "custom-core-input" required attribute:
                if (this.required)
                    //select the input element by Id, and set Required attr to True:
                    this.$.custominput.required = true;
            }
        });
</script>

Answer 2

Required 是一个 conditional attribute，因此您可以像这样在 input 元素上设置它：

<polymer-element name="custom-core-input" 
      attributes="columnId inputError validation required">
  <template>
    <section>
      <paper-input-decorator id="decorator"
            error="{{inputError}}"
            autovalidate>
        <input id="custominput" is="core-input"
              validate="{{validation}}"
              on-change="{{inputCommited}}"
              required?="{{required}}">
      </paper-input-decorator>
    </section>
  </template>
  <script>
    Polymer('custom-core-input', {
      required: false
    });
  </script>
</polymer-element>

请注意，custom-core-input 的 required 属性必须初始化为 false（或 true，取决于您的默认值）。

仅当输入无效时才会显示错误信息。因此，一种选择是设置 autovalidate 属性。在 custom-core-input 上设置 required 和 inputError，您将在页面加载时看到错误消息。更一般地说，您想根据当前输入的有效性将 isInvalid 设置为 true 或 false。

将空属性设置为另一个内部的聚合物组件

Set empty attribute to polymer component inside another one

polymer