web-dev-qa-db-ja.com

Angular Material Mat-Stepper：同じフォームグループを複数のステップに使用するにはどうすればよいですか？

これは私のフォームグループです。別のフォームグループ内でフォームグループを使用しています。

this.shopGroup = this.fb.group({
  _user: [''],
  name: ['', Validators.compose([Validators.required, Validators.maxLength(60)])],
  url_name: [''],
  desc: ['', Validators.compose([Validators.required, Validators.maxLength(600)])],
  photos: [''],
  currency: ['Real'],
  language: ['Português do Brasil'],
  address: this.fb.group({
    zipcode: ['', Validators.compose([Validators.required, Validators.pattern('[0-9]{5}[\-]?[0-9]{3}')])],
    street: ['', Validators.compose([Validators.required, Validators.maxLength(70)])],
    number: [null, Validators.compose([Validators.required, Validators.max(99999)])],
    complement: ['', Validators.maxLength(30)],
    district: ['', Validators.compose([Validators.required, Validators.maxLength(60)])],
    state: ['', Validators.required],
    city: ['', Validators.compose([Validators.required, Validators.maxLength(70)])]
  }),
  status: [true],
  created_at: [new Date()],
  updated_at: [new Date()]
});

テンプレートは次のとおりです。

<form [formGroup]="shopGroup">
  <mat-horizontal-stepper [linear]="isLinear" #stepper>
    // Im not sure how to set stepControl
    <mat-step [stepControl]="?">
        <ng-template matStepLabel>Store Creation</ng-template>
        <mat-form-field>
          <input matInput placeholder="Nome" formControlName="name">
        </mat-form-field>
        ...
        <div>
          <button mat-button matStepperNext type="button">Next</button>
        </div>
    </mat-step>
    // Im not sure how to set stepControl
    <mat-step formGroupName="address" [stepControl]="?">
      <ng-template matStepLabel>Configuração do Envio/Frete</ng-template>
      <mat-form-field>
        <input matInput placeholder="CEP" formControlName="zipcode">
      </mat-form-field>
      ...
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>Done</ng-template>
      You are now done.
      <div>
        <button mat-button matStepperPrevious>Back</button>
      </div>
    </mat-step>
  </mat-horizontal-stepper>
</form>

これは、単一フォームのAngular Materialドキュメントです。

<form [formGroup]="formGroup">
  <mat-horizontal-stepper formArrayName="formArray" linear>
    <mat-step formGroupName="0" [stepControl]="formArray.get([0])">
      ...
      <div>
        <button mat-button matStepperNext type="button">Next</button>
      </div>
    </mat-step>
    <mat-step formGroupName="1" [stepControl]="formArray.get([1])">
      ...
      <div>
        <button mat-button matStepperPrevious type="button">Back</button>
        <button mat-button matStepperNext type="button">Next</button>
      </div>
    </mat-step>
    ...
  </mat-horizontal-stepper>
</form>

最初のステップでshopGroupを使用し、次に2番目のステップでaddress（shopGroup内のグループ）を使用したいと思います。最後に、shopGroupを送信します。ステップ間にtype="button"を設定し、最後にtype="submit"を設定する必要があることは承知していますが、あるステップから別のステップに移動するために[stepControl]を設定する方法がわかりません。テンプレート（html）で動作させる方法は？

javascriptangulartypescriptangular-material2angular-material-stepper
4
James

公式ドキュメント 1つのフォームでマットステッパーを処理する方法を読むことができます

まず、フォームグループの配列を定義する必要があります。

this.formGroup = this._formBuilder.group({
      formArray: this._formBuilder.array([
        this._formBuilder.group({
          firstNameFormCtrl: ['', Validators.required],
          lastNameFormCtrl: ['', Validators.required],
        }),
        this._formBuilder.group({
          emailFormCtrl: ['', Validators.email]
        }),
      ])
    });

次に、HTMLテンプレートで使用されるformGroupsの配列を返すことができる必要があります。

  get formArray(): AbstractControl | null {
    return this.dictationForm.get('formArray');
  }

次に、各mat-stepを特定のグループformArray要素に関連付ける必要があります。

<mat-step formGroupName="0" [stepControl]="formArray?.get([0])"></mat-step>

あなたは実用的な例を見つけることができます ここ

5
kuncevic.dev