每個步驟的角度材料步進組件

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>