我有一个表单,在表单中有一个自定义组件,其中包含某些字段。表格末尾有一个按钮。该按钮有...
disabled.bind="!(formValid && subFromValid)"
现在,在自定义组件上,我有一个变量“subFormValid”的双向绑定(bind)。 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);
}
我在控制台中看到了一百万多行,但我能够一直观看它。当我第一次加载页面时,它正在记录...
validating form
true
然后我填写了子表单,并检查了控制台。控制台显示...
validating form
true
但是,该按钮现已启用。
出于某种原因,每当 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,反之亦然。
最佳答案
我尝试使用以下方法重现您的问题:
<input type="checkbox" checked.bind="formValid"/>
<input type="checkbox" checked.bind="subFormValid"/>
<button disabled.bind="wholeFormValid">Submit</button>
我注意到在您的函数中,您在 console.log 行中使用了 this.formValid
,但在返回行中您使用了 formValid
,而没有 this
。这似乎是一个与实际绑定(bind)变量不同的变量。我认为你的函数应该是这样的:
get wholeFormValid() {
console.log("validating form");
console.log(!(this.formValid && this.subFormValid));
return !(this.formValid && this.subFormValid);
}
编辑:我还强烈建议在 get() 上使用 @compulatedFrom
装饰器来减少 aurelia 的计算量。您可以阅读更多相关内容 here .
关于javascript - Aurelia中的disabled.bind无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47065474/