Angular Material Mat-Stepper:如何为多个步骤使用相同的表单组? [英] Angular Material Mat-Stepper: How to use the same formgroup for multiple steps?

查看：28
本文介绍了Angular Material Mat-Stepper:如何为多个步骤使用相同的表单组?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我的表单组.我在另一个表单组中使用表单组:

this.shopGroup = this.fb.group({_用户:['']，名称:['', Validators.compose([Validators.required, Validators.maxLength(60)])],网址名称:['']，desc: ['', Validators.compose([Validators.required, Validators.maxLength(600)])],相片: ['']，货币:['真实']，语言:['葡萄牙语做巴西']，地址:this.fb.group({邮政编码:['', Validators.compose([Validators.required, Validators.pattern('[0-9]{5}[\-]?[0-9]{3}')])],街道: ['', Validators.compose([Validators.required, Validators.maxLength(70)])],数字:[null, Validators.compose([Validators.required, Validators.max(99999)])],补充:['', Validators.maxLength(30)],区:['', Validators.compose([Validators.required, Validators.maxLength(60)])],状态:[''，Validators.required]，城市:['', Validators.compose([Validators.required, Validators.maxLength(70)])]}),状态:[真]，created_at: [新日期()],更新时间:[新日期()]});

这是模板:

<mat-h​​orizo​​ntal-stepper [linear]="isLinear" #stepper>//我不知道如何设置 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>

</mat-step>//我不知道如何设置 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>返回</button><button mat-button matStepperNext>Next</button>

</mat-step><垫步><ng-template matStepLabel>完成</ng-template>你现在已经完成了.<div><button mat-button matStepperPrevious>返回</button>

</mat-step></mat-h​​orizo​​ntal-stepper></表单>

这是单个表单的 Angular Material 文档:

<mat-h​​orizo​​ntal-stepper formArrayName="formArray" linear><mat-step formGroupName="0" [stepControl]="formArray.get([0])">...<div><button mat-button matStepperNext type="button">Next</button>

</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>

</mat-step>...</mat-h​​orizo​​ntal-stepper></表单>

我想在第一步使用 shopGroup，然后在第二步使用 address(shopGroup 内的组).最后，我想发送shopGroup.我知道我需要在步骤之间设置 type="button"，并在最后设置 type="submit"，但是我不确定如何设置[stepControl] 从一个步骤移动到另一个步骤.如何让它在模板(html)上工作?

解决方案

你可以阅读官方文档 你应该如何使用单一表单处理 mat-stepper

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

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 模板上使用的 formGroup 数组:

 get formArray(): AbstractControl |空值 {返回 this.dictationForm.get('formArray');}

然后您应该将每个 mat-step 与特定的组 formArray 元素相关联:

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

您可以在此处找到一个工作示例

This is my form group. I'm using a form group inside another one:

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()]
});

Here is template:

<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>

This is the Angular Material documentation for single forms:

<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>

I want to use shopGroup on first step, then use address (group inside shopGroup) on second step. Finally, i want to send shopGroup. I'm aware that I need to set type="button" between steps, and type="submit" on the end, however i'm not sure how to set [stepControl] to move from one step to another one. How to make it work on template (html)?

解决方案

You can read in official docs how you should handle a mat-stepper with a single form

First you need to define an array fo form groups: 

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

Second you need be able to return the array of formGroups that will be consumed on HTML template:

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

Then you should associate each mat-step with a particular group formArray element:

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

You can find a working example here

这篇关于Angular Material Mat-Stepper:如何为多个步骤使用相同的表单组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆