MatHorizontStepper stepControl с шаблонно-управляемыми формами

Question

Есть ли способ использовать [stepControl] ошибка сопоставления с шаблонами управляемых форм? Документы только учат об экземпляре AbstractControl, который, очевидно, заставляет использовать реактивную форму.

Я пытался использовать [stepControl]="myNgForm" а также [linear]="true" чтобы проверить шаги, но степпер просто игнорирует это.

Я ценю любую помощь.

Спасибо!

Answer 1

Похоже, что пошаговое управление работает с "form.control". Вот пример с одной формой на шаг и шаблонно-управляемыми формами.

  <mat-vertical-stepper [linear]="true">
    <mat-step [stepControl]="form1.control">
       <form #form1="ngForm">
          <input [(ngModel)]="name" name="name" required />
       </form>
    </mat-step>
    <mat-step [stepControl]="form2.control">
       <form #form2="ngForm">
          <input [(ngModel)]="address" name="address" required />
       </form>
    </mat-step>
  </mat-vertical-stepper>

Answer 2

use [stepControl]="myNgForm.controls.[controlGroup]"

<form #form="ngForm" novalidate>
  <mat-vertical-stepper [linear]="true">
    <mat-step label="Reporting person" ngModelGroup="reportor" [stepControl]="form.controls.reportor">
       <mat-form-field>
          <input matInput placeholder="First Name" name="firstName" ngModel required />
       </mat-form-field>
    </mat-step>
  </mat-vertical-stepper>
</form>

Answer 3

Директива ngForm имеет форму свойства типа FormGroup.

https://angular.io/api/forms/NgForm