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的計算量。 您可以在這里閱讀更多內容。