Aurelia中的disabled.bind无法正常工作

Question

我有一个表单，在表单中有一个包含某些字段的自定义组件。 表格末尾有一个按钮。 该按钮有...

disabled.bind="!(formValid && subFromValid)"

现在，在自定义组件上，我对变量“ subFormValid”进行了双向绑定。只有当自定义组件中的验证有效时，subFormValid才有效。 因此，子表单会验证某些字段并设置subFormValid = true。 即使“ formValid”为false，该按钮也已启用。 我不知道为什么，这让我发疯。 我什至甚至为变量添加了get函数，并在其中添加了控制台日志，就像这样...

<button type="submit" disabled.bind="wholeFormValid">Submit</button>

那我上课的时候

get wholeFormValid() {
  console.log("validating form");
  console.log(!(this.formValid && this.subFormValid));
  return !(formValid && subFormValid);
}

我在控制台中获得了超过一百万行的信息，但是我一直都能观看。 当我第一次加载页面时，它正在记录...

验证表格

真正

然后，我填写了子表单，并检查了控制台。 控制台显示...

验证表格

真正

但是，该按钮现已启用。

由于某种原因，无论何时subFormValid = true，都会启用该按钮，而与formValid无关。

除非满足两个条件，否则有人知道如何禁用按钮吗？ 我所做的所有操作都会在subFormValid为true时启用该按钮，即使控制台仍在记录“ true”，这也应该禁用该按钮。

只是为了提供帮助，如果有人想知道为什么表单中存在子表单，这是因为需要使用Smarty Streets验证地址，并且我们希望能够在其他地方重用表单的那一部分，所以我创建了一个表单地址部分的自定义组件，用于验证输入并验证地址。 它以这样的形式被调用...

<require from="components/smarty-streets"></require>

然后像这样使用...

<smarty-streets form-is-validated.two-way="subFormValid"></smarty-streets>

然后在聪明的街道上，我...

@bindable formIsValidated;

然后我根据组件中的验证将值从true更改为false，反之亦然。

Answer 1

我尝试使用以下方法重新创建您的问题：

<input type="checkbox" checked.bind="formValid"/>
<input type="checkbox" checked.bind="subFormValid"/>
<button disabled.bind="wholeFormValid">Submit</button>

我注意到在您的函数中，您在console.log行中使用了this.formValid ，但是在返回行中，您使用了formValid ，而没有this 。 这似乎是与实际绑定变量不同的变量。 我认为您的函数应如下所示：

get wholeFormValid() {
  console.log("validating form");
  console.log(!(this.formValid && this.subFormValid));
  return !(this.formValid && this.subFormValid);
}

编辑：我也强烈建议在get（）上使用@computedFrom装饰器，以减少@computedFrom的计算量。 您可以在这里阅读更多内容。