Question

我总共有8个步骤表格。我在register.html文件中使用isLinear=true，在register.ts文件中使用步进形式。现在，这8个步骤来自具有8个不同步骤形式的步骤模块。

实际上，当我使用doc中的步骤表单时。

对我来说很好。

但是，当我尝试从步骤表单中调用<mat-form-field>的内容时，它给了我一个mat-form-field must contain a MatFormFieldControl的问题。我了解这个问题。现在我被困在：

如何在<mat-form-field>下使用isLinear = true下的不同步骤表单（步骤表单来自步骤文件夹）。

这是我的代码：

<mat-horizontal-stepper [linear]="isLinear" #stepper>

    <mat-step [stepControl]="firstFormGroup">
       <form [formGroup]="firstFormGroup">
        <ng-template matStepLabel>Fill out your name</ng-template>
            <mat-form-field>
                 <steponeForm></steponeForm>// For  this its givng me error of mat-form-field must contain a MatFormFieldControl although under steponeForm.html its define
            </mat-form-field>
        <div>
           <button mat-button matStepperNext>Next</button>
        </div>
         </form>
    </mat-step>
       <mat-step [stepControl]="firstFormGroup">
       <form [formGroup]="firstFormGroup">
        <ng-template matStepLabel>Fill out your name</ng-template>
            <mat-form-field>
               <steptwoForm></steptwoForm> // For  this its givng me error of mat-form-field must contain a MatFormFieldControl although under steptwoForm.html its define
            </mat-form-field>
        <div>
           <button mat-button matStepperNext>Next</button>
        </div>
         </form>
    </mat-step>

Answer 1

<mat-form-field>需要一个类似matInput的组件，从您的代码中删除<mat-form-field>，然后重试。

Answer 2

在这里经过大量研究，我找到了最佳的解决方案。

我们需要将每个步骤组件都引用到父组件，以便isLinear=true可以正常工作，并且除非直到没有提交当前步骤表格，否则它都不允许继续进行下一步。

要获得更多许可，请访问here，下面是另一个示例：

https://stackblitz.com/edit/angular-umvpjs?file=app%2Fstep-one.component.ts。

希望如此，将来肯定会对其他开发人员有所帮助。

如何将isLinear与来自stepper中其他步骤组件的matFormFields（输入字段）一起使用？

2 个答案: