2016-05-25 2 views
1

:ngFormControlバインディングを取り付けた)別個のサブフォームを(描画独自のコンポーネントに関連付けられている)フォームウィザードでナビゲートするときにユーザー入力データ(フォーム)を保持するための最良の方法は何ですか?私はAngular2を使用してい

1)各wizardstep(画面:私は以下に基づいて、フォームウィザードに取り組んでい

。ルータ/ルーティングがフォーム

3を通して前進するために適用される))は、ユーザ入力データを個別に各フォームに検証され

2 [*]

4)ユーザ入力データがあること、すなわち、持続しますAPIに送信された後、ユーザーは確認します(ウィザードの最後のステップで)。

[*]私は将来、複数のページ、つまりフォームにまたがるクロスフォームであるいくつかのバリデーションルールを持っている可能性があります。今のところ、これは私の質問の範囲外です

私はユーザーがウィザードのステップを前後にナビゲートすると、ユーザーの入力データが保持されます。 Angular2に入る最善の方法は何ですか?

は(私はこれまで、ネットを検索しましたが、私は私の問題で)angular2に(具体的な提案を見つけることに成功しませんでした。)最善の方法である共有データサービスを使用することです

答えて

1

ウィザードに含まれるすべてのコンポーネントに共通です。このため

export class SharedDataService { 
    wizardData: any; 
} 

あなたがそれらのすべてを使用する親コンポーネントのプロバイダでそれを設定することができます。

@Component({ 
    (...) 
    providers: [ SharedDataService ] // <---- 
} 

アプリケーションをブートストラップするときにも、それを指定することができますが、それはすべてで共有されますアプリケーション:

bootstrap(AppComponent, [ SharedDataService ]); 

は、詳細については、このドキュメントを参照してください。

+0

ありがとうございます。ティエリー、ありがとうございます。伝統的なサービス(シングルトンパターン)アプローチ。私は、Angular2がテーブル上にいくつかの新しい構造物を持ってきたことを期待していました。私は角度ルータのAngular2 canReuseと他のライフサイクルフックについて読みました。私は私のソリューションが自動的に保存し、フォームの状態を復元するためにこれらのフックポイントを使用する必要があります(SharedDataServiceアプローチを使用して)...? – user2120188

+0

こんにちはThiery、フォームごとにユーザー入力の状態をキャプチャするSharedDateServiceにフォームを(ウィザードのステップごとに1つずつ)入れたいと思います。私のウィザードでは、ユーザー入力中にユーザーが前後にナビゲートすることができます。つまり、フォームページを切り替えて以前入力したユーザー入力データが表示されます。私の状態サービスはすべてのフォームで変更サブスクリプションを持ち、ユーザー入力時に各フォームステートと同期します。フォームに戻ると、(新しく作成された)formModelを、以前に保存した状態サービスの値で初期化します。フォームのデータ値の保存/復元を行うより良い方法はありますか? – user2120188

関連する問題