Как я могу использовать isLinear с matFormFields (Полями ввода), поступающими из компонентов других шагов в степпере? - PullRequest
Новая
       24

Как я могу использовать isLinear с matFormFields (Полями ввода), поступающими из компонентов других шагов в степпере?

0 голосов
/ 27 апреля 2019

У меня всего 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>

Ответы [ 2 ]

0 голосов
/ 27 апреля 2019

Здесь После долгих исследований я нашел лучшее рабочее решение.

Нам нужно отнести каждый компонент шага к родительскому компоненту, чтобы isLinear=true работал, и он не позволял бы переходить к другому шагу до тех пор, пока текущая форма шага не будет подана.

Для получения дополнительной информации посетите здесь и ниже еще один пример того же:

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

Надеюсь, что в будущем это наверняка поможет другим разработчикам.

0 голосов
/ 27 апреля 2019

<mat-form-field> ожидает такой компонент, как matInput, удалите <mat-form-field> из своего кода и попробуйте снова.

...