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

然而，似乎在元素生命周期中，我可以循环遍历内容标记内的所有元素，忽略添加到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事件侦听器，并在每次表单元素的输入更改时运行此方法。

这是working jsbin。

Answer 2

如果我理解您的问题，您的高级目标是表单验证吗？

正如polycasts和其他地方所详述的那样，我使用了iron-form，它具有一些非常强大的validate（）功能，包括你在上面提到的内容等等。

有时需要使用隐藏xquery version "1.0-ml"; module namespace adv = "http://***/***/adv"; import module namespace search = "http://marklogic.com/appservices/search" at "/Marklogic/appservices/search/search.xqy"; '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">', xdmp:set-response-content-type("text/html; charset=utf-8"), <html xmlns="http://www.w3.org/1999/xhtml">字段的一些奇怪用法来完成所有工作，但这在polycast中很容易学习，例如polycast 55和56

如果你在2017年偶然发现了这个问题，那么在你看到这个问题后，你肯定会想要使用更原始的技术。

添加Polymer元素的属性以根据内容或更好的方式处理表单进行观察

2 个答案: