每个步骤的角度材料步进组件

Question

我有一个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

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

Answer 1

问题出在您的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声明。

要解决您的问题，您可以为 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]
        });

    }

}

Answer 2

您的步进器和表单组件适用于不同的表单对象。 您需要在 step 组件的ngOnInit()设置 super 的 forms 对象

ngOnInit() {
    super.frmStepTwo = this.formBuilder.group({
        address: ['', Validators.required]
    });
}

相反

ngOnInit() {
    this.frmStepTwo = this.formBuilder.group({
        address: ['', Validators.required]
    });
}

Answer 3

要将每个步骤作为自己的组件的 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>