13

マルチステップフォーム間でデータを交換するための次のアプローチを想像できます。

1) フォームステップごとにコンポーネントを作成し、@input、@output を介してコンポーネント間でデータを交換します (たとえば、step5 から 2 に変更することはできません)。

data2)新しいルーターで新しいプロパティを使用します (ここを参照) (たとえば、手順 5 から 2 に変更することはできません))

3)データを格納するための共有サービス (依存関係の注入) (コンポーネントの相互作用) (たとえば、手順 5 から 2 に変更できます)

4) @ngrx/store を使用した新しい基礎 (まだ実際には経験していません)

「得た経験値」を教えてください。何を使用し、その理由は何ですか?

4

2 に答える 2

15

以下の私の編集を参照してください。

私の意見では、使用SessionStorageはこれにアプローチするための厳密な「角ばった」方法ではありません。共有サービスが最適な方法です。ステップ間のルーティングを実装するとさらに良いでしょう (各コンポーネントは独自のフォームと異なるロジックを持つことができるため、適切と思われる場合:

const multistepRoutes: Routes = [
  {
    path: 'multistep',
    component: MultistepComponent,
    children: [
      {
        path: '',
        component: MultistepBaseComponent,
      },
      {
        path: 'step1',
        component: MultistepStep1Component
      },
      {
        path: 'step2',
        component: MultistepStep2Component
      }
    ]
  }
];

サービスmultistep.serviceはモデルを保持し、コンポーネントのロジックを実装できます。

import { Injectable, Inject } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class MultistepService { 

  public model = {};
  public baseRoute = '/multistep';
  public steps = [

    'step1', 
    'step2'

  ];

  constructor (
    @Inject(Router) public router: Router) { };

  public getInitialStep() {

    this.router.navigate([this.baseRoute + '/' + this.steps[0]]);

  };

  public goToNextStep (direction /* pass 'forward' or 'backward' to service from view */): any {

    let stepIndex = this.steps.indexOf(this.router.url.split('/')[2]);

    if (stepIndex === -1 || stepIndex === this.steps.length) return;

    this.router.navigate([this.baseRoute + '/' + this.steps[stepIndex + (direction === 'forward' ? 1 : -1)]]);

  };

};

幸運を。

編集 12/6/2016

実際、しばらくの間フォーム API を使用してきたので、以前の回答がこれを達成するための最良の方法であるとは思いません。

FormGroup好ましいアプローチは、マルチステップ フォームの各ステップを独自のFormControl( FormGroupまたは FormArraycontrolsのいずれかの)プロパティの下に持つトップ レベルを作成することです。このような場合のトップ レベル フォームは、フォームの状態の唯一の信頼できるソースとなり、作成の各ステップ (ngOnInit / コンストラクター) は、トップ レベルからそれぞれのステップのデータを読み取ることができますFormGroup。疑似コードを参照してください。

   const topLevelFormGroup = new FormGroup({
       step1: new FormGroup({fieldForStepOne: new FormControl('')}),
       step2: new FormGroup({fieldForStepTwo}),
       // ...
   });

   ... 

   // Step1Component

   class Step1Component { 
       private stepName: string = 'step1';
       private formGroup: FormGroup;
       constructor(private topLevelFormGroup: any /* DI */) {
           this.formGroup = topLevelFormGroup.controls[this.stepName];
       }
    }

したがって、フォームと各ステップの状態は、本来あるべき場所 (フォーム自体) に正確に保持されます。

于 2016-09-23T11:22:05.610 に答える