Question

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

这是我的自定义元素的代码。我想要做的是每当custom-core-input的属性为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'，我认为它不起作用，但值得尝试。我只是不知道如何处理这个，我觉得必须有一个简单的答案，但不能想到它。

另外（和无关），我认为我做错了其他事情，因为paper-input-decorator不会“获取”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>

请注意，required的{{1}}属性必须初始化为false（或者为true，具体取决于您的默认值）。

仅在输入无效时才会显示错误消息。因此，一个选项是设置custom-core-input属性。在autovalidate上设置required和inputError，您将在页面加载时看到错误消息。更一般地说，您希望将custom-core-input设置为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>

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

2 个答案: