Angular Material Mat-Stepper:如何将同一表单组用于多个步骤? [英] Angular Material Mat-Stepper: How to use the same formgroup for multiple steps?
问题描述
这是我的表单组.我在另一个内部使用了一个表单组:
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()]
});
这是模板:
<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)上起作用?
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]
}),
])
});
第二,您需要能够返回将在HTML模板上使用的formGroups数组:
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');
}
然后,您应该将每个mat-step
与特定的组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屋!