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

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。

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