問題タブ [angular-material-stepper]

私は Web ページの 1 つのステッパー要素に取り組んでおり、マテリアル デザイン ドキュメント ( https://material.angular.io/components/.reset() ) を使用してフォームを空白の状態に戻すために機能を実装しようとしましたステッパー/概要)

複数のフォーム グループの例に従って、最初のステップに戻ってフォームをクリアすると、.reset が正しく機能することがわかります。ただし、単一フォーム構造を使用しようとするとstepper.reset()、最初のステップに戻りますが、フォームがクリアされないことがわかりました。

単一のフォームでは、ボタンのクリック時にフォームの送信を防ぐために [次へ] ボタンと [戻る] ボタンにそれが必要であるため、リセットボタンにラベルを付けてみましType="button"たが、変更は見られませんでした。

リセットがクリックされたときに両方のアクションが発生するようにしたいのですが、手動でリセット関数を作成する必要があるのか​​ 、それともコードにバグがあるだけなのかわかりません。

これについての助けは大歓迎です。ありがとう！

create.component.html

create.component.ts

私は自分のプロジェクトでフレックスレイアウトのみを使用し、バニラCSSを避けようとしています. 水平方向に角度のある材料ステッパーを中央に配置して、見栄えを良くする方法がわかりません。確認margin: 0 auto;しましたが、正常に動作します。これが私のコードです：

問題のスクリーンショット:

6段のマットステッパーを作りました。6 番目の段階は送信です。各段階は 7 つの入力値で構成され、特定のフォーム グループとフォーム コントロールの下に設定されます。@ 6 回目の提出では、オブジェクトはグループごとに個別に送信されます。データをすべてのフォーム グループの 1 つのオブジェクトとして投稿したいと考えていました。

以下のデータ値でステッパーステップを作成しました

コンポーネント レベル

HTML

予想どおり、ステップは DEV-TEST-UAT-PROD として提供されますが、問題はすべてのステップが同じフォーム データを持っていることです。各ステップを個別のフォーム グループ データで公開したかったのです。誰でもこれを達成する方法を助けることができますか

別のステップを追加すると、ステップ レベルが上がります。