Angular Material Mat-Stepper：如何为多个步骤使用相同的表单组？

Posted 2023-05-07

【中文标题】Angular Material Mat-Stepper：如何为多个步骤使用相同的表单组？

【英文标题】：Angular Material Mat-Stepper: How to use the same formgroup for multiple steps?

【发布时间】：2019-04-01 03:39:15

【问题描述】：

这是我的表单组。我在另一个表单组中使用了一个表单组：

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，然后在第二步使用address（shopGroup 内的组）。最后，我想发送shopGroup。我知道我需要在步骤之间设置type="button"，最后设置type="submit"，但是我不确定如何设置[stepControl] 从一个步骤移动到另一个步骤。如何让它在模板（html）上工作？

【参考方案1】：

您可以在official docs 中阅读如何使用单一表单处理垫子步进器

首先你需要为表单组定义一个数组：

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>

你可以找到一个工作示例here

【讨论】：

如果您收到错误ERROR Error: Cannot find control with name: '0'，请确保您已在步进器<mat-horizontal-stepper formArrayName="formArray" ...> 上设置formArrayName。我花了一些时间才弄清楚。