Javascript 在字段有效之前，如何禁用聚合物中的按钮？

我喜欢用polymer创建一个基本对话框。用户应输入类别名称，如果他输入了什么，他可以按下按钮保存/发送。只要“类别”字段中没有值或“类别”字段中存在验证错误，则应禁用该按钮

我尝试了这个，但它没有设置按钮为禁用最初

<paper-input required auto-validate invalid="{{invalid}}"></paper-input>
<paper-button disabled$="[[invalid]]">Send</paper-button>

Polymer({
    is: 'list',
    properties: {  
        invalid: {
            type: Boolean
        },
        ...

---

以下是一种可能的解决方案：

---

以下是一种可能的解决方案：

---

您可以使用一个计算绑定，该绑定将invalid和value都作为参数

<paper-button disabled$="[[isDisabled(invalid, value)]]">Enable on valid input</paper-button>

---

您可以使用一个计算绑定，该绑定将invalid和value都作为参数

<paper-button disabled$="[[isDisabled(invalid, value)]]">Enable on valid input</paper-button>

---

我不确定我是否完全满足你的要求。当然，你可以试试看。

---

您这里有一张很好的备忘单

我不确定是否完全满足您的要求。当然，你可以试试看。

---

这里有一个很好的备忘单

是的，但在这种情况下，它会在用户实际做某事之前立即显示错误。这是一种糟糕的用户体验。这也是纸张输入的无效参数在默认情况下在onLoad状态下为false而不是true的原因。通过preventInvalidInput将其强制为true是不够的。提示：如果不想在更新的演示中看到加载时的验证错误，请删除required属性。现在，onLoad状态下的错误消息已消失，但现在按钮也已启用，尽管1-10之间没有值。你看到问题了吗？是的，但在这种情况下，它会在用户实际做某事之前立即显示错误。这是一种糟糕的用户体验。这也是纸张输入的无效参数在默认情况下在onLoad状态下为false而不是true的原因。通过preventInvalidInput将其强制为true是不够的。提示：如果不想在更新的演示中看到加载时的验证错误，请删除required属性。现在，onLoad状态下的错误消息已消失，但现在按钮也已启用，尽管1-10之间没有值。你看到问题了吗？我考虑过了，但后来就好像我自己建立了验证。此外，我需要为每个输入字段执行此操作。如果我这样做的话，输入元素的验证功能不会提供任何价值。我知道这不是解决问题的最优雅的解决方案，但我认为没有其他选择。例如，您也可以将按钮包装到表单组件中，并为所有表单元素全局安装更改侦听器。类似于链接中倒数第二个示例。但是，您仍然需要检查输入的所有值。我考虑过这一点，但之后就好像我构建了自己的验证。此外，我需要为每个输入字段执行此操作。如果我这样做的话，输入元素的验证功能不会提供任何价值。我知道这不是解决问题的最优雅的解决方案，但我认为没有其他选择。例如，您也可以将按钮包装到表单组件中，并为所有表单元素全局安装更改侦听器。类似于链接中倒数第二个示例。但是，您仍然需要检查输入的所有值。Polymer 2.0的备忘单：Polymer 2.0的备忘单：

<paper-button disabled$="[[isDisabled(invalid, value)]]">Enable on valid input</paper-button>

isDisabled: function(invalid, value) {
    return invalid || value.length === 0;
}