Question

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

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

为了说明我的意思，我在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

这是stackblitz。 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中定义的FormGroup与您的步进器组件之间没有任何关系。您尝试使用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.frmStepOn : 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 formStepX: FormGroup;

    constructor(private formBuilder: FormBuilder) {
    }

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

    }

}

Answer 2

您的步进器和表单组件适用于不同的表单对象。您需要在步骤组件的ngONInit()

中设置超级表单对象

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

而不是

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

Answer 3

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

每一步的角度材料步进器组件

3 个答案: