問題タブ [mat-stepper]

各ステップで formGroup を使用して mat-stepper を使用しています。ステップでフォームに入力してからクリックして次へ進みますが、フォームが有効であっても、前のフォームは完了しません (編集を維持し、mat-step-icon-selected を使用します)。

私が理解しているように、それはデフォルトの動作です。ステップは完了し、有効です -> 完了。私は正しいですか？

私の場合、何が問題なのですか？

TestComponentテンプレートで . を使用するコンポーネントがあり<mat-stepper>ます。matStepperNextステッパーのコンテキストのため、ボタンでディレクティブを使用するのではなく、プログラムで次のステップに進む必要があります。したがって、私のコンポーネントは次のようになります。

test.component.ts

ここでの秘訣は、呼び出されたものをテストする必要stepper.next()があるということです。私はディレクティブを使用しているだけなので<mat-dialog>、クラスで実際にそのオブジェクトを作成したり、コンストラクターでプロバイダーを作成したりすることはありません。そのため、テスト方法がよくわかりません。私は成功せずにさまざまなことを試しましたが、私の最新のテストは次のとおりです。

test.component.spec.ts

しかし、私はちょうどエラーが発生します

スパイの MatStepper.next が呼び出されることが予想されます

非常に奇妙な問題が発生しています。angular 13.0.2でWebサイトを開発しており、mat-stepperを使用してフォームを作成しています（および ngx-editor 、問題がある場合に備えて言及します）。ページが読み込まれると、mat-stepperを除いてすべてが完全に表示されます。表示するには、画面をクリックする必要があります。フォームには非常に多くの要素があることを認めなければなりませんが、それが原因かどうかはわかりません。ここで何が問題になる可能性がありますか？

ありがとう。

PS: バックエンドがまだないため、ここに HTML コード全体を示します。

特定のタイプの新しいエンティティの作成と既存のエンティティの編集の両方に使用されるダイアログにマットステッパーを使用しています。ステッパーは 4 つのステップで構成されています。最初の 3 つのステップのそれぞれには、データを入力するためのフォームが含まれていますが、最後のステップは、最初の 3 つのステップで入力されたデータの要約/概要のみです。

ユーザーが3つのステップすべてで有効なデータを入力した場合にのみ、ユーザーが最後のステップに進むことを許可したい. これを行うために、linear属性をステッパーに追加して、ユーザーが各ステップを実行するように強制しました。ユーザーがダイアログを介して新しいエンティティを作成している場合、これは完全に正常に機能します。ただし、既存のエンティティを編集する場合、たとえば少なくともステップ 2 をクリックする前に直接ステップ 3 に進むことはできません。編集モードでダイアログを開くと、プログラムでステップのすべてのフィールドに次のデータを入力します。既存のエンティティであるため、現在表示されているステップに有効なデータが入力されている限り、ユーザーが任意のステップに直接移動できるようにしたいと考えています。問題を示すスタックブリッツは次のとおり です。

すべてのフィールドがプログラムによって既に入力されているにもかかわらず、たとえば、前のステップをクリックする前にステップ 3 または 4 に直接進むことはできません。

linearこれを解決するための最初の試みは、ダイアログが編集モードで開かれているときに属性を削除することでした。これには望ましい効果がありますが、ユーザーがステップの一部のフィールドをクリアしてから直接最後のステップに進むこともできますが、これは許可したくありません。これは、前のステップがすべて実行されている場合にのみ、最後のステップに到達できる必要があるためです。有効なデータで完全に満たされています。

マットステッパーでこの動作を実現する方法はありますか? 問題が明確でない場合はお知らせください。詳しく説明できるよう最善を尽くします。

私はウェブサイトを構築しています。登録フォームでは、マット垂直ステッパーを使用しています。5 つのマットステップがあります。1) 個人情報 2) 投資プロファイル 3) アカウント情報 4) 資金調達のセットアップ 5) サインインして送信

サインインして送信すると、以前の mat-step ラベルからのすべての情報が、対応する mat-step-Labels と共に取得されます。

ここでの私の問題は、ユーザーがクリックしたときに各 mat-Step-Label に編集アイコンがあり、特定の mat-step に移動して content を編集する必要があることです。