1

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

实际上，当我使用doc中的步骤形式时。

这对我来说可以。

但是当我试图调用<mat-form-field>from steps 表单的内容时，它给了我一个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>
4

2 回答 2

1

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

我们需要将每个步骤组件引用到父组件以便isLinear=true工作，并且除非当前步骤表单未提交，否则它不会允许使用继续执行另一个步骤。

如需更多许可，请访问此处和以下是相同的另一个示例：

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

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

于 2019-04-27T15:35:36.387 回答
0

<mat-form-field>期待像 matInput 这样的组件，<mat-form-field>从您的代码中删除并重试。

于 2019-04-27T13:29:56.143 回答