複数のルートを使用した角型検証

Question

複数のルートに対して角型検証を行うにはどうすればよいですか？ たとえば、1つの大きなフォームがあり、タブのようないくつかのセクションが含まれており、いつでもそれらのセクションに移動できます。 私は、同じようなナビゲーションのためにルートを使用します。 など。私は5つのタブを含むテンプレートを持っています。

私はデータをサーバーに送信されたすべての入力を記入すると、サーバは自分のデータを検証し、Iデータに誤りがあった場合、サーバは「この

{のようなオブジェクトでエラー配列を含むJSONのようなフロントエンドに送っフィールド "：" some input "、" message "：" some error message "}

この回答を解析し、フィールド値でフォームコントロールを検索し、エラーメッセージを追加します。しかし、私はそれを行うことができます、1つの瞬間に、私はアクティブなルートが1つだけのタブを持っているので、私はこのタブのためのフォームコントロールを持っているが、バックグラウンドで他のタブをロードし、 、それらのエラーメッセージを設定しますか？

この問題を解決する方法はありますか？

私はインターネット上で答えを見つけようとしましたが、具体的なものは見つかりませんでした。私は同じ問題を持つ記事を1つしか見つけませんhttp://heidloff.net/article/angular-2-form-redux-multiple-routes、実際にはReduxを使用する方法は他にありません。

[UPDATE]

私は私の問題を解決しました。私は、フォームからのタブのルートを削除し、早期

<router-outlet></router-outlet> 

たルートフォーム・コンポーネントでのタブのすべてのコンポーネントを追加し、* ngIfを追加する場合、それは、重要ある各タブに[隠さ]ディレクティブを追加しました* ngIfの条件が真ではない間は、コンポーネントにアクセスできないため、ルータ出口のような問題があります。

そして、各タブの定数でjavascriptクラスを作って、activeTabプロパティをルートコンポーネントフォームに追加して、タブをクリックするとactiveTabを変更して、このタブのフォームを表示します。私はすべてのタブコンポーネントへのアクセスを持っていると私は私にエラーのレスポンスをサーバとサーバ復帰への要求をしたとき、私は、ルートフォームコンポーネントでそれを処理することができ、子フォームコンポーネント

Answer 1

件名に購読に適用されます。このように

。しかし、どの場合にはこれが必要ですか？あなたがタブを変更すると、あなたはコンポーネントを再活性化します。 CommonServiceのすべてのurエラーを保存し、コンポーネントがロードされたときにServiceからエラーを拾う必要があります。

export class PaymentService { 

    formErrors: any = {} 

    constructor() { } 

    setErrors(errors: any) { 
     this.formErrors = errors; 
    } 

    getErrors() { 
     return this.formErrors 
    } 

} 

Answer 2

私は1つの実装について考えていますが、モデルオブジェクトは角度付きで、サーバー上ではタブで区切られています。例えば私は1つのルートモデルオブジェクトを持っており、それは各タブのモデルオブジェクトを含んでいます。私は1つのタブを入力し、サーバーに私のモデルを送信すると、サーバーはエラーとフィールドを持つタブの名前を含むエラーオブジェクトを私に与えます。サーバーからの応答を取得すると、エラーのあるタブの名前が表示されます。その後、このタブを強調表示して、サービスのすべてのエラーを保存します。Alex Kvitchastiyが提案しました。私がタブにナビゲートするとき、私はAfterViewInitフックを使用し、共通サービスからこのタブのエラーを取得し、エラーがある場合はタブのコントロールに適用します。

しかし、この実装には1つの問題があります。必要なフィールドをすべて記入していない間にフォームを保存するボタンを無効にしたいのですか？あるタブに位置していて、他のタブの他のコントロールがロードされていないために、あるタブのフォームコントロールにアクセスできるようにすれば、どうすればいいのか分かりません。