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

我有一个

角度材料线性步进器

每个步骤都是一个单独的

角度组件

，包含一个

表格

，需要

验证

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

为了说明我的意思，我在stackblitz上创建了一个压缩版本

我认为主要要看的是

createprofile.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组件

这是斯塔克闪电战。
步进器和窗体组件可在不同的窗体对象上工作。您需要在步骤组件的
ngOnInit（）

反而

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

问题出在
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
中定义的表单组与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>

无论哪种方式，都不需要使用
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]
        });

    }

}

要使每个步骤都作为自己的组件的mat步进机，请创建在组件外部穿过步进机的按钮，并根据单个组件内部完成的表单验证显示/隐藏遍历按钮，并将表单信息公开给父步进机。


例如：

<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>


下一个
我不得不使用“ViewChild”方法，因为另一种方法触发了“ExpressionHasChangedTercheck”错误！尽管它奏效了，但它可能会在未来引发问题（如果它们能解决这个问题的核心问题，也可能不会）。无论如何，感谢（我昨天升级了）将frmStepX声明移动到构造函数中解决了这个问题。只需注意：我得到了
ExpressionChangedAfterItHasBeenCheckedError:Expression在检查后发生了更改。以前的值：“未定义”。当前值：“[object object]”。
错误，并通过在构造函数中初始化各个步骤组件的表单来解决。只需在构造函数中创建表单组即可
this.form=new FormGroup（{}）感谢@SplitterAlex的快速响应，我没有在模板中包含步骤组件引用（#step1，#step2），因为当你说“或者你让html保持原样…”时，我有点困惑。我的坏：）现在工作得很好，我的代码更容易维护。再次感谢。我查过你的stackblitz。线性模式在那里不起作用。
@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]
        });

    }

}

<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>