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

Question

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

这是我的自定义元素的代码。只要 custom-core-input 的 required 属性为 true，我就将“required”设置为 input 元素。

<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”，我认为它不起作用，但值得一试。我只是不知道如何解决这个问题，我觉得必须有一个简单的答案但想不出。

另外（并且不相关），我认为我做错了其他事情，因为纸输入装饰器不会“获取” inputError 值。

感谢阅读:)

Answer 1

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。

Answer 2

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

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