每个步骤的角度材料步进组件 [英] Angular Material Stepper Component For Each Step

问题描述

我有一个 angular material linear stepper 每个步骤都是一个单独的 angular component 包含一个 form 需要 validation>

I have a angular material linear stepper each step is a separate angular component containing a form which needs validation

验证根本不起作用.我可以在不填写表格的情况下进入下一步.

The validation simply just isn't working. I can progress through to the next step without completing the form.

为了说明我的意思，我在 stackblitz 上创建了一个精简版本.

To illustrate what I mean I have created a condensed version on 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

这是堆栈闪电战.https://stackblitz.com/edit/angular-vpoj5j

推荐答案

问题出在你的 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 与您的步进器组件之间没有关系.您尝试使用 CreateProfileComponent 扩展每个 StepComponent，但是通过这种方法，每个 StepComponent 都有自己的 CreateProfileComponent 实例，并且所以他们自己的FormGroup声明.

There is no relation between your defined FormGroups in CreateProfileComponent and your stepper components. 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.

要解决您的问题，您可以为 html 中的每个 StepComponent 声明模板变量(以 # 开头)并将 formControl 传递给 [stepControl]:

To solve your problem you can declare template variables for every StepComponent in your html (starting with #) and pass the formControl to [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()(我的首选方法):

Or you leave your html as it is and work with ViewChild() (my preferred approach):

@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 并且它没有任何意义.

Either way there is no need to extend your StepComponents with CreateProfileComponent and it doesn't make any sense.

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

    }

}

这篇关于每个步骤的角度材料步进组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！