disabled.aはAureliaで正しく動作しません

Question

フォームには、フォームに特定のフィールドを持つカスタムコンポーネントがあります。フォームの最後にボタンがあります。ボタンはカスタムコンポーネントに、私は、変数のバインディングがsubFormValidは、カスタムコンポーネントでの検証が有効である場合にのみ有効である「subFormValid」双方向を持って、今...

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

を持っています。したがって、サブフォームはいくつかのフィールドを検証し、subFormValid = trueを設定します。 "formValid"がfalseであっても、ボタンは現在有効になっています。 私はなぜそれが分かりません、そして、それは私をナッツを運転しています。私も...私が持っている私のクラスに続いて

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

...

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

Iを変数に関数getを追加し、そのように、それにコンソールログを追加すると、これまで行ってきましたコンソールには何百万ものラインが追加されましたが、私はそれを全時間見ることができました。私が最初にそれがログインしたページをロードすると...真

、検証フォーム

は、それから私は、サブフォームを記入し、コンソールをチェックします。コンソールは...

はまだ真

フォーム

を有効に示した、ボタンが有効になりました。

何らかの理由で、subFormValid = trueの場合、formValidに関係なく、ボタンが有効になります。

2つの条件が満たされない限り、ボタンを無効にする方法は誰にも分かりますか？私がしていることは、コンソールがまだ "true"を記録していてもボタンを無効にする必要があるにもかかわらず、subFormValidがtrueになるとただちにボタンを有効にします。

Smarty Streetsを使用してアドレスを検証する必要があり、他の場所でフォームのその部分を再利用できるようにするために、フォームにサブフォームがある理由が不思議に思えるのであれば、私は、入力を検証し、アドレスを検証するアドレスセクション用のカスタムコンポーネントを作成しました。それは

@bindable formIsValidated; 

...

私はSmartyの路上で次に

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

...そう...

次のように使用して次に

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

のような形で呼び出されているとコンポーネントの検証に応じて、値を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を使用し、あなたの機能に気づいたが、戻りラインにあなたはthisせずに、formValidを使用しました。これは実際のバインディング変数とは異なる変数のようです。

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

編集：私も強くない計算のオーレリアの量を減らすために）（あなたの取得に@computedFromデコレータを使用することをお勧めします私はあなたの関数は次のようになりべきだと思います。その詳細はhereで読むことができます。