[英]Angular Material Stepper Component For Each Step
I have a angular material linear stepper
each step is a separate angular component
containing a form
which needs validation
我有一个
angular material linear stepper
每一步都是一个单独的angular component
其中包含一个需要validation
的form
The validation simply just isn't working.验证根本不起作用。 I can progress through to the next step without completing the form.
我可以在不填写表格的情况下进入下一步。
To illustrate what I mean I have created a condensed version on stackblitz.为了说明我的意思,我在 stackblitz 上创建了一个精简版本。
The main things to look at (I think) is the create-profile.component.html
要查看的主要内容(我认为)是
create-profile.component.html
<mat-horizontal-stepper linear #stepper>
<mat-step [stepControl]="frmStepOne">
<ng-template matStepLabel>Step One Details</ng-template>
<step-one-component></step-one-component>
</mat-step>
<mat-step [stepControl]="frmStepTwo">
<ng-template matStepLabel>Step Two Details</ng-template>
<step-two-component></step-two-component>
</mat-step>
<mat-step [stepControl]="frmStepThree">
<ng-template matStepLabel>Step Three Details</ng-template>
<step-three-component></step-three-component>
</mat-step>
</mat-horizontal-stepper>
And each step-X-component
和每个
step-X-component
Here is the stackblitz.这是堆栈闪电战。 https://stackblitz.com/edit/angular-vpoj5j
https://stackblitz.com/edit/angular-vpoj5j
The problem is in your CreateProfileComponent
:问题出在您的
CreateProfileComponent
:
@Component({
selector: 'create-profile-component',
templateUrl: './create-profile.component.html'
})
export class CreateProfileComponent {
frmStepOne: FormGroup;
frmStepTwo: FormGroup;
frmStepThree: FormGroup;
constructor(private fb: FormBuilder) { }
}
There is no relation between your defined FormGroups in CreateProfileComponent
and your stepper components.您在
CreateProfileComponent
定义的 FormGroups 与步进器组件之间没有关系。 You tried to extend every StepComponent
with CreateProfileComponent
, but with this approach every StepComponent
has its own instance of CreateProfileComponent
and so their own FormGroup
declaration.您尝试使用
CreateProfileComponent
扩展每个StepComponent
,但是通过这种方法,每个StepComponent
都有自己的CreateProfileComponent
实例,因此它们有自己的FormGroup
声明。
To solve your problem you can declare template variables for every StepComponent
in your html (starting with #
) and pass the formControl to [stepControl]
:要解决您的问题,您可以为 html 中的每个
StepComponent
声明模板变量(以#
开头)并将 formControl 传递给[stepControl]
:
<mat-horizontal-stepper linear #stepper>
<mat-step [stepControl]="step1.frmStepOne">
<ng-template matStepLabel>Step One Details</ng-template>
<step-one-component #step1></step-one-component>
</mat-step>
<mat-step [stepControl]="step2.frmStepTwo">
<ng-template matStepLabel>Step Two Details</ng-template>
<step-two-component #step2></step-two-component>
</mat-step>
<mat-step [stepControl]="step3.frmStepThree">
<ng-template matStepLabel>Step Three Details</ng-template>
<step-three-component #step3></step-three-component>
</mat-step>
</mat-horizontal-stepper>
Or you leave your html as it is and work with ViewChild()
(my preferred approach):或者您保留 html 原样并使用
ViewChild()
(我的首选方法):
@Component({
selector: 'create-profile-component',
templateUrl: './create-profile.component.html'
})
export class CreateProfileComponent {
@ViewChild(StepOneComponent) stepOneComponent: StepOneComponent;
@ViewChild(StepTwoComponent) stepTwoComponent: StepTwoComponent;
@ViewChild(StepTwoComponent) stepThreeComponent: StepThreeComponent;
get frmStepOne() {
return this.stepOneComponent ? this.stepOneComponent.frmStepOne : null;
}
get frmStepTwo() {
return this.stepTwoComponent ? this.stepTwoComponent.frmStepTwo : null;
}
get frmStepThree() {
return this.stepThreeComponent ? this.stepThreeComponent.frmStepThree : null;
}
}
Either way there is no need to extend your StepComponents
with CreateProfileComponent
and it doesn't make any sense.无论哪种方式,都不需要使用
CreateProfileComponent
扩展您的StepComponents
并且它没有任何意义。
@Component({
selector: 'step-x-component',
templateUrl: './step-x.component.html',
})
export class StepXComponent {
public frmStepX: FormGroup;
constructor(private formBuilder: FormBuilder) {
}
ngOnInit() {
this.frmStepX = this.formBuilder.group({
name: ['', Validators.required]
});
}
}
Your stepper and forms components works on different form objects.您的步进器和表单组件适用于不同的表单对象。 You need to set super's forms objects in step component's
ngOnInit()
您需要在 step 组件的
ngOnInit()
设置 super 的 forms 对象
ngOnInit() {
super.frmStepTwo = this.formBuilder.group({
address: ['', Validators.required]
});
}
instead相反
ngOnInit() {
this.frmStepTwo = this.formBuilder.group({
address: ['', Validators.required]
});
}
To have a mat-stepper with each step as its own component, create the buttons to traverse through the stepper outside the component and show/hide the traversal buttons based on form validation done inside the individual component and expose the form info to the parent stepper.要将每个步骤作为自己的组件的 mat-stepper,创建按钮以遍历组件外部的 stepper,并根据在单个组件内完成的表单验证显示/隐藏遍历按钮,并将表单信息公开给父 stepper .
For Example:例如:
<mat-horizontal-stepper #stepper linear iseditable>
<mat-step
[stepControl]="firstFormGroup"
[completed]="primaryIsTrue"
>
<app-primary-settings
(formIsValid)="formValidity($event)"></app-primary-settings>
<button mat-button matStepperNext
*ngIf="primaryIsTrue">
Next
</button>
</mat-step>
</mat-horizontal-stepper>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.