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

问题描述

我有一个angular material linear stepper，每个步骤都是一个单独的angular component，其中包含一个需要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

The main things to look at (I think) is the 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屋！