根据内容或处理表单的更好方式为Polymer元素添加属性

Question

我需要使用Polymer Paper-Input元素创建一个表单，并且我需要一种方法来知道何时填写了所有必需的内容。

我寻找一个内置元素，但没有看到一个。所以我想创建一个聚合物表单元素来包装所有的输入标签。生成的元素将有一个Invalid属性，该属性让您知道是否有任何输入标记无效。

标签的用法如下:

<test-form id="testform">
    <paper-input label="test" required error="This field is required"></paper-input>
</test-form>
Invalid: {{ $.testform.invalid }}

然而，似乎在元素生命周期中我可以循环遍历content标记内的所有元素时，添加到observe对象中的任何内容都被忽略了。

下面是我正在处理的代码:

<polymer-element name="test-form" attributes="invalid">
<template>
    <content id="content">
    </content>
</template>
<script>
    Polymer('test-form', {
        domReady: function () {
            this.observe = {};
            for (var i = 0; i < this.children.length; i++) {
                this.observe["this.children[" + i + "].invalid"] = "valChanged";
            }
        },
        invalid: false,
        valChanged: function (oldValue, newValue) {
            // TODO: If newValue is true set invalid to true
            //       If newValue is false, loop over all elements to see if all are now valid and invalid can be set to false.
            alert("VALUE CHANGED" + oldValue + newValue);
        }
    });
</script>

有没有更好的方法来处理这个问题，或者有人知道如何改变在生命周期的这一点上观察到的聚合物吗?

Answer 1

至于检查表单的有效性，您可以简单地检查每个表单元素的invalid属性:

validate: function() {
  var invalid = false;
  Array.prototype.forEach.call(this.children, function(child) {
    if (child.invalid === true) {
      invalid = true;
    }
  });
  this.invalid = invalid;
}

然后您可以添加一个input事件监听器，并在每次表单元素的输入发生变化时运行此方法。

Answer 2

如果我理解你的问题，你的高层目标是表单验证?

正如在polycast和其他地方详细介绍的那样，我使用了具有一些非常强大的validate()功能的iron-form，包括您上面提到的以及更多。

有时确实需要一些隐藏的<input>字段的奇怪用法来完成所有的工作，但这很容易在polycast中学习，例如polycast 55和56

如果你在2017年偶然发现了这个问题，在你看到它所提供的东西之后，你现在肯定想使用更原始的技术。