Polymer 将空属性设置为另一个组件中的聚合物组件
我一直在尝试为另一个聚合元素中的聚合元素设置一个空属性 这是我的自定义元素的代码。只要自定义核心输入的属性required为true,我就尝试将input元素设置为“required”Polymer 将空属性设置为另一个组件中的聚合物组件,polymer,Polymer,我一直在尝试为另一个聚合元素中的聚合元素设置一个空属性 这是我的自定义元素的代码。只要自定义核心输入的属性required为true,我就尝试将input元素设置为“required” <polymer-element name="custom-core-input" attributes="columnId inputError validation required"> <template> <section> <paper-
<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>
聚合物({
InputCommitted:函数(){
this.$.decorator.isInvalid=!this.$.custominput.validity.valid;
}
});
到目前为止,我已经尝试访问输入元素并从脚本中设置'attr',我认为它不起作用,但值得一试。我只是不知道如何处理这个问题,我觉得一定有一个简单的答案,但我想不起来
另外(而且与此无关),我认为我在做其他错误的事情,因为纸质输入装饰器不会“接受”inputError值
感谢阅读:)在元素原型中,有一种方法可以做到这一点:
<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>
聚合物({
就绪:函数(){
//选中“自定义核心输入”必需属性:
如果(这是必需的)
//按Id选择输入元素,并将Required attr设置为True:
此$.custominput.required=true;
}
});
必需的
是一个,因此您可以在输入
元素上设置它,如下所示:
<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>
聚合物(“自定义核心输入”{
必填项:false
});
请注意,自定义核心输入的required
属性必须初始化为false(或true,取决于您的默认值)
仅当输入无效时才会显示错误消息。因此,一个选项是设置autovalidate
属性。在自定义核心输入上设置必需
和输入错误
,您将在页面加载上看到错误消息。更一般地说,您希望根据当前输入的有效性将isInvalid设置为true或false。我想我以前试过,但无论如何也不起作用。我认为问题可能不是所需的attr,而是我没有正确地管理on change事件,以便装饰者对验证做出反应。我正在用脚本上的内容更新主要帖子。尽管如此,我似乎还没有找到使error属性正确获取其值的方法。我想特别避免的是自动验证,因为拥有一个几乎所有字段都标记为红色的类似表单的控件看起来并不合适。我希望它在输入值提交后立即进行验证,我用脚本更新了我的问题。我会把你的答案标记为正确的,因为它解决了线程的主要问题,但是如果你对这个问题的“验证”方面有任何想法,我将不胜感激。谢谢:)为了澄清,当我说错误消息没有被“放”在paper元素中时,我的意思是,当检查最终代码时,它显示error=“{{inputError}”,而不是其中的值,就像在任何其他属性上发生的那样,我不希望看到除了验证之外的错误消息。您看到error=“{{inputError}}”
因为error
本身就是聚合元素的属性(不是普通的DOM元素)。为了使属性绑定正常工作,不使用其结果替换此聚合表达式。计算将延迟,直到在纸张输入装饰器
内的div.error-text
元素中呈现此属性。