每一步的角度材质步进器组件
我有一个angular material linear stepper，每个步骤都是一个单独的angular component，其中包含一个需要validation的form
验证根本就不起作用。我可以在不填写表单的情况下继续下一步。
为了说明我的意思，我在stackblitz上创建了一个压缩版本。
(我认为)要查看的主要内容是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>和每个step-X-component
这就是stackblitz。https://stackblitz.com/edit/angular-vpoj5j
回答 3
Stack Overflow用户
发布于 2018-01-29 19:02:35
问题出在您的CreateProfileComponent中
@Component({
selector: 'create-profile-component',
templateUrl: './create-profile.component.html'
})
export class CreateProfileComponent {
frmStepOne: FormGroup;
frmStepTwo: FormGroup;
frmStepThree: FormGroup;
constructor(private fb: FormBuilder) { }
}您在CreateProfileComponent中定义的FormGroups和您的stepper组件之间没有关系。您曾尝试使用CreateProfileComponent扩展每个StepComponent，但是使用这种方法时，每个StepComponent都有自己的CreateProfileComponent实例，因此都有自己的FormGroup声明。
要解决您的问题，您可以为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>或者让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;
}
}无论哪种方式，都不需要使用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]
});
}
}Stack Overflow用户
发布于 2018-01-29 18:53:34
stepper和forms组件在不同的form对象上工作。您需要在step组件的ngOnInit()中设置超级的forms对象
ngOnInit() {
super.frmStepTwo = this.formBuilder.group({
address: ['', Validators.required]
});
}相反，
ngOnInit() {
this.frmStepTwo = this.formBuilder.group({
address: ['', Validators.required]
});
}Stack Overflow用户
发布于 2021-01-08 16:58:49
要使每个步骤都作为其自己的组件的mat-stepper，请创建按钮以遍历组件外部的stepper，并基于在单个组件内完成的表单验证显示/隐藏遍历按钮，并将表单信息公开给父stepper。
例如：
<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>https://stackoverflow.com/questions/48498966
复制相似问题
腾讯云开发者
