2017-08-30 8 views
1

Aurelia Contact Manager Tutorialで拡張しようとしています。具体的には、email-validationをcontact-details.htmlビューに追加する。私はValidation: Basicsのドキュメントの例に従っており、最初のパスでは期待通りに機能しました。アプリケーションを起動し、連絡先リストモジュールから連絡先を選択し、「@」を取り除いて無効なものに電子メールを更新します。検証ルールが発生し、エラーメッセージが表示されます。ビューモデルのその後のアクティベーションでAurelia検証ルール(モデルにバインドされていません)が発生しません

しかし、アプリケーションを起動した後、最初の連絡先とそれに続く2番目の連絡先を選択すると、連絡先詳細モジュールの2回目の起動がトリガーされ、検証ルールは起動しません。

私はcontact-detailのactivateでvalidationController.reset()を試しましたが、これは '古い'エラーメッセージを削除しますが、ぼかしの有効性は依然として発生しません。

(NewInstance.of(ValidationController)とValidationControllerFactoryを使用して)検証コントローラを作成する2つの異なる方法を試しましたが、どちらも同じ結果をもたらします。

2番目の連絡先に移動し、検証を「中断」した後、ブラウザを更新してページを再読み込みしてから、検証が再度機能します。私がリストから別の連絡先を選ぶまで、再びそれを壊すでしょう。

私はAureliaとJavaScriptのフレームワークには一般的ではありません。これがバグか、同じページへの再ルーティングを処理するために余分なものがあるかどうかはわかりません。

答えて

0

これは良い質問です。あなたに追いつくかもしれないことがいくつかあります。あなたが検証のために使用しているビュー・モデルが裏ではありませんので

https://gist.github.com/freshcutdevelopment/170c2386f243e7095e276811dab52299

落とし穴

[表示] - :私はこの作業を取得するために必要なファイルの修正を含む要旨を作成しましたモデルの場合は、検証ルールを適用する別のクラスが必要になります。contact-detail.htmlビューファイルあなたがすでにこの部分を釘付けにしているように聞こえるが、私はそれを完全に含めるつもりだ。あなたはそうのように、このクラスを作成することができます。

export class Contact { 
    email= ''; 
} 

次のようにあなたは、このクラスに検証ルールを適用することができます

ValidationRules 
    .ensure(a => a.email).required().email() 
    .on(Contact); 

ここで最後の可能な不足しているパズルのピースは、あなたがフックする必要がありますということです画面のアクティブ化ライフサイクルフックdeactivate()に入力し、検証コンテキストをリセットします。これにより、BootstrapValidationRendererはビューから検証スタイルを削除します。

deactivate(){ 
    this.controller.reset(); 
    } 

検証ワークフロー

手順は次のとおりです。

  1. は、コントローラ
  2. が場合にのみ必要(検証モデルを作成し、コントローラ
  3. validation rendererを追加注入します検証したいモデルがビューをバックアップするビューモデルではありません)
  4. 検証を再設定して実行するタイミングを決定します(この場合は、ライフサイクルフックdeactivate)。
+1

はお返事して、コードをありがとうビューにvalidation binding behaviorを適用します。ちょっとした変更を加えれば、私のコードを動作させることができました!あなたのコードに加えた唯一の変更はValidationRulesの定義にありました。 'code' ValidationRules .ensure( 'email')。email()。required() .on(Contact); 'code' – Jonesi

+0

ここにはとてもうれしい、うれしい! :D –

関連する問題